How to make a div's width stretch between two divs - css

Question

My current problem is that I have three div elements; one floated left, one floated right, and one between those two. I want the center div to automatically stretch to the max width of the width available between the two divs.
HTML
<div id="contain">
<div id="left">1</div>
<div id="filler"></div>
<div id="right">2</div>
</div>
CSS
#left {
text-decoration: none;
display: inline-block;
float: left;
width: auto;
padding: 0px 20px 0px 20px;
height: 45px;
text-align: center;
line-height: 300%;
background: #FF9000;
color: #FFFFFF;
}
#navFiller {
display: inline-block;
position: fixed;
float: left;
width: auto;
height: 45px;
background: #FF9000;
}
#right {
text-decoration: none;
display: inline-block;
float: right;
width: auto;
padding: 0px 20px 0px 20px;
height: 45px;
text-align: center;
line-height: 300%;
background: #FF9000;
color: #FFFFFF;
}
#contain {
width: 100%;
height: 45px;
padding: 0;
margin: 0;
display: inline;
}
Jsfiddle of project:
http://jsfiddle.net/msEBU/

Answer 1

If you add your filler element after the floated elements, and then change up its styles a little bit (including giving the style-block the correct id), you can get what you're going for:
#left {
display: inline-block;
float: left;
padding: 0px 20px 0px 20px;
height: 45px;
text-align: center;
line-height: 300%;
background: #FF9000;
color: #FFFFFF;
}
#filler {
display: block;
float: none;
height: 45px;
background: #F00;
}
#right {
display: inline-block;
float: right;
padding: 0px 20px 0px 20px;
height: 45px;
text-align: center;
line-height: 300%;
background: #FF9000;
color: #FFFFFF;
}
#contain {
width: 100%;
height: 45px;
padding: 0;
margin: 0;
display: inline;
}
<div id="contain">
<div id="left">1</div>
<div id="right">2</div>
<div id="filler">m</div>
</div>
OR, simulate a table:
#contain {
width: 100%;
padding: 0;
margin: 0;
display: table;
}
#left,
#right {
text-decoration: none;
display: table-cell;
width: 5%;
text-align: center;
background: #FF9000;
color: #FFFFFF;
padding: 2% 0;
}
#filler {
display: table-cell;
width: auto;
background: #F00;
}
<div id="contain">
<div id="left">1</div>
<div id="filler">m</div>
<div id="right">2</div>
</div>
Both methods have their benefits. It's up to you which is right for you.

Answer 2

Many implementations of CSS do not support automatic sizing relationships between different float layers. There are many solutions though. My recommendation is to use a small bit of javascript. I've used the following line of Jquery with some minor css tweaks:
$('#filler').outerWidth($('#contain').width()-$('#right').outerWidth()-$('#left').outerWidth());
Fiddle:
http://jsfiddle.net/K9C4u/2/
Also note that I moved the divs onto the same line because it makes a text node with a space for each of the return+tabs.