CSS fill remaining width

Question

I have this header bar.

<div id="header">         <div class="container">             <img src="img/logo.png"/>             <div id="searchBar">                 <input type="text" />             </div>             <div class="buttonsHolder">                 <div class="button orange inline" id="myAccount">                     My Account                 </div>                 <div class="button red inline" id="basket">                     Basket (2)                 </div>             </div>          </div>     </div> 

I need the searchBar to fill whatever the remaining gap is in the div. How would I do this?

Here's my CSS

#header {      background-color: #323C3E;     width:100%; }  .button {     padding:22px; }   .orange {     background-color: #FF5A0B; }  .red {     background-color: #FF0000; }  .inline {      display:inline; }  #searchBar {     background-color: #FFF2BC; } 

Answer 1

Use calc!

https://jsbin.com/wehixalome/edit?html,css,output

HTML:

<div class="left">   100 px wide!   </div><!-- Notice there isn't a space between the divs! *see edit for alternative* --><div class="right">     Fills width!   </div> 

CSS:

.left {   display: inline-block;   width: 100px;    background: red;   color: white; } .right {   display: inline-block;   width: calc(100% - 100px);    background: blue;   color: white; } 

Update: As an alternative to not having a space between the divs you can set font-size: 0 on the outer element.

Answer 2

You can realize this layout using CSS table-cells.

Modify your HTML slightly as follows:

<div id="header">     <div class="container">         <div class="logoBar">             <img src="http://placehold.it/50x40" />         </div>         <div id="searchBar">             <input type="text" />         </div>         <div class="button orange" id="myAccount">My Account</div>         <div class="button red" id="basket">Basket (2)</div>     </div> </div> 

Just remove the wrapper element around the two .button elements.

Apply the following CSS:

#header {     background-color: #323C3E;     width:100%; } .container {     display: table;     width: 100%; } .logoBar, #searchBar, .button {     display: table-cell;     vertical-align: middle;     width: auto; } .logoBar img {     display: block; } #searchBar {     background-color: #FFF2BC;     width: 90%;     padding: 0 50px 0 10px; }  #searchBar input {     width: 100%; }  .button {     white-space: nowrap;     padding:22px; } 

Apply display: table to .container and give it 100% width.

For .logoBar, #searchBar, .button, apply display: table-cell.

For the #searchBar, set the width to 90%, which force all the other elements to compute a shrink-to-fit width and the search bar will expand to fill in the rest of the space.

Use text-align and vertical-align in the table cells as needed.

See demo at: http://jsfiddle.net/audetwebdesign/zWXQt/