Expand div to get remaining width with css

Question

I need help, I have a 4 div elements, three of them have fixed width, one of them needs to be with auto width. Second element needs to have variable width.

For example:

<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 help

Answer 1

This can be achieved using 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

Float 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;}

Markup, Move #second to 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>