3 div's middle div take up remaining width - html

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.

Answer 2

Okay using flex and based this answer
#parent {
display: flex;
}
#left {
width:150px;
background-color:#ff0000;
}
#middle {
flex: 1 1 auto;
background-color:#00ff00;
}
#right {
width: 150px;
background-color:#0000ff;
}
<div id="parent">
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>
</div>
This actually works if the left and right divs has variable width also.

Answer 3

Check this similar answer
HTML
<div class = "container">
<div class = "fixed">
I'm 150px wide! Glee is awesome!
</div>
<div class = "fluid">
I'm fluid! Glee is awesome!
</div>
<div class = "fixed">
I'm 150px wide! Glee is awesome!
</div>
</div>
CSS
html, body {
height: 100%;
font-family: 'Arial', 'Helvetica', Sans-Serif;
}
.container {
display: table;
width: 100%;
height: 100%;
}
.container > div {
display: table-cell;
text-align: center;
}
.fixed {
width: 150px;
background: rgb(34, 177, 77);
color: white;
}
.fluid {
background: rgb(0, 162, 232);
}
DEMO

Answer 4

If you don't want to use table cells and don't want to give your outer boxes a fixed width (instead let their width be determined by their content, you can use the overflow-hidden and float method)
The bad thing about this method is you have to adhere to having overflow hidden on your divs and also you have to arrange your divs in a backwards way (see below)
DEMO
HTML
<div class='container'>
<div class='third-box'>Third</div>
<div class='first-second'>
<div class='first-box'>First</div>
<div class='second-box'>Second</div>
</div>
</div>
CSS
.container {
width: 400px;
}
.first-second {
overflow: hidden;
}
.first-box {
float: left;
background-color: coral;
}
.second-box {
overflow: hidden;
background-color: aquamarine;
}
.third-box {
float: right;
background-color: salmon;
}

Answer 5

I used this to set a flexible width for the items to the side. Used it in a listed item to get a progress bar with 2 buttons on the side.
ul {
display: table;
width: 100%;
}
ul > li {
display: table-cell;
}
ul > li:nth-child(2) {
min-width: 100%;
}