Expand div to get remaining width with css

Question

I need help, I have 4 div elements, three of them have a fixed width, one of which should be with automatic width. The second element must have a variable width.

For instance:

<div id="wrapper"> <div id="first"> </div> <div id="second"> </div> <div id="third"> </div> <div id="fourth"> </div> </div> 

Css:

 #first,#second,#third,#fourth{ float:left; } #second{ width:auto; overflow:hidden; } #first,#third,#fourth{ width: 200px; } 

thanks for the help

Answer 1

This can be achieved with display: table-cell jsfiddle

CSS

 #wrapper .item{ display: table-cell; width: 150px; min-width: 150px; border: 1px solid #777; background: #eee; text-align: center; } #wrapper #second{ width: 100% } 

Markup

  <div id="wrapper"> <div id="first" class="item">First </div> <div id="second" class="item">Second </div> <div id="third" class="item">Third </div> <div id="fourth" class="item">Fourth </div> </div> 

Update

Floating version

CSS

  #wrapper div{background:#eee; border: 1px solid #777; min-width: 200px;} #first{ float: left; } #wrapper #second{ width: auto; background: #ffc; border: 1px solid #f00; min-width: 100px; overflow: hidden; } #first, #third, #fourth{ width: 200px; } #third, #fourth{float: right;} 

Pegging , Move # per second to the end

  <div id="wrapper"> <div id="first">First</div> <div id="third">Third</div> <div id="fourth">Fourth</div> <div id="second">Second</div> </div> 

Answer 2

I think you could find this one:

This is for your reference, if you have such a thing, then you can do the trick with this, I don’t know exactly what your css looks like, but this is the main idea.

Demo here

CSS

 #wrapper { width:960px; } #first { float:left; width:240px; } #second { width:240px; float:left; } #third { float:left; width:240px } 

Here your last div width will be set automatically.