3 div's middle div take up remaining width
css, html
Solution
Use `display: table`:
#container {
display: table;
width: 100%;
}
#left, #middle, #right {
display: table-cell;
}
#left, #right {
width: 150px;
}
Where the `#container` is your parent element like in
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
Here is a Fiddle.
Problem
Alright guys, I've been busting my balls over this one. I've got three divs; left, middle, right. All 100% height. The left and right div have a fixed width of 150px. Now I want the middle div to take up the remaining space. Example: Here CSS: ``` #left { height:100%; width:150px; float:left; background:red; z-index:999; } #middle { height:100%; width:100%; background:yellow; margin-left:-150px; margin-right:-150px; } #right { float:right; height:100%; width:150px; background:red; z-index:998; } ```