3 div's middle div take up remaining width

Question

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

Answer 1

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.