Expand div to get remaining width with css

css, html, stylesheet

Solution

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>

Problem

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

Original source