HTML/CSS Full width header with three columns - 2 fixed one loose - html

Question

Problem Statement is as follows, suppose you have an header containing three elements:
<div class="logo">...</div>
<div class="search">...</div>
<div class="options">...</div>
Both logo and options have absolute withs of 220px and 294px respectively.
Elements layout arrangement is:
.logo { float:left; }
.search {float:left; }
.options { float:right; }
Now I want to make .search 100% of the window window - 220px - 294px).
The answer to this question should try to seek as answer that do not involve:
css calc function, like: .search{ width: calc(100% - 200px - 294px); }
javascript!
I thought about using a table and let the second td => 'search' calculate it's width automatically.
But seems overkill, to use a table for achieving this.
I'm curious about the answer. Don't bother making fiddles, half word is enough for me.

Answer 1

You can use margin for the search div:
.logo { float:left;width: 220px; }
.search {margin: 0 295px 0 221px;}
.options { float:right;width:294px;}
But for this, html markup should be ordered like this:
<div class="logo">...</div>
<div class="options">...</div>
<div class="search">...</div>

Answer 2

#BhojendraCLinkNepal give a traditional solution which works on old browsers, but you have to change HTML structure. Another solution works on new browsers with flex.
<style>
body {display: flex; flex-direction: row;} /* or the header container */
.logo {width: 220px;}
.search {flex: 1;}
.options {width: 294px;}
</style>
<div class="logo">...</div>
<div class="search">...</div>
<div class="options">...</div>
See here for browser compatibility.

Answer 3

I thought about using a table and let the second td => 'search' calculate it's width automatically. But seems overkill, to use a table for achieving this.
right, but you could take benefit of display: table-cell (widely supported from all current browsers) without actually using a table
e.g.
<div id="wrapper">
<div class="logo">logo</div>
<div class="search">search</div>
<div class="options">options</div>
</div>
Css
#wrapper { display: table; width: 100%; }
#wrapper > div { display: table-cell; }
.logo { width: 220px; }
.options { width: 294px; }
Live example(1): http://codepen.io/anon/pen/QwjBqQ
Also, on lower screen you may change the position of each block through mediaqueries,
Live example(2): http://codepen.io/anon/pen/ogjMpX

Answer 4

I remeber doing something to the fact of making a "container" div with display-block and then aligning the divs inside just like you would align text. But that was a while back.
You could have aloo at felxbox though http://css-tricks.com/snippets/css/a-guide-to-flexbox/ ... no script ... just css ... that does it similar.

Answer 5

So the final solution, that seems to me, to be more balanced is:
<div class="logo">...</div>
<div class="options">...</div>
<div class="search">...</div>
.logo {
float:left;
width: 220px;
}
.search {
float: left;
width: calc(100% - 220px - 294px);
/* fallback for browsers not support calc() */
width: auto\9; /* IE6, IE7, IE8, IE9 */
margin-left: 221px\9; /* IE6, IE7, IE8, IE9 - please ensure this equals .logo:width +1 */
margin-right: 295px\9; /* IE6, IE7, IE8, IE9 - please ensure this equals .options:width +1 */
}
.options {
float:right;
width:294px;
}
Notes on this solution: Browser hacks are not very elegant, although I tend to use them a lot for IE. If you are completely against it, I recommend you to try to emulate calc using the non-standard expression() syntax.
Thanks everyone!

Answer 6

Another solution could be like this one : jsfiddle
<div class="wrapper">
<div class="search">search</div>
<div class="logo">logo</div>
<div class="options">options</div>
</div>
.wrapper{
position:relative;
}
.wrapper .logo{
position:absolute;
width:220px;
top:00px;
left:00px;
}
.wrapper .options{
position:absolute;
top:00px;
right:00px;
width:294px;
}
.wrapper .search{
position:relative;
width:100%;
text-indent:240px;
}