Two floated divs with a flexible div in-between - css

Question

I need the following in a header of fixed width:
A div of varying width floated left.
A div of varying width floated right.
An h2 centered between them that takes up any remaining space.
The floated divs contain content that may vary in size.
I've tried various approaches but they have all failed. I know one solution is to absolutely position the outer divs, then stretch the h2 out for the full width and center the text so it sits centrally, but there must be a nicer way to do this.

Answer 1

A basic jsFiddle example with minimal markup.
HTML
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
<h2>H2</h2>
</div>​
CSS
#container {
border:1px solid #999;
}
#left {
float:left;
}
#right {
float:right;
}
h2 {
text-align:center;
margin:0;
}
​

Answer 2

You could use display: inline-block instead of float, and then use CSS calc to get the right width for the middle div:
HTML:
<div id="wrapper">
<div id="one"></div><div id="two"></div><div id="three"></div>
</div>​
CSS:
#wrapper {
min-width: 300px;
}
#one, #two, #three {
display: inline-block;
height: 300px;
}
#one {
background: lightgreen;
width: 100px;
}
#two {
background: lightblue;
width: 100%;
width: calc(100% - 300px);
width: -webkit-calc(100% - 300px);
width: -moz-calc(100% - 300px);
}
#three {
background: lightgreen;
width: 200px;
}​
jsFiddle Demo
You can then put the h2 inside the the middle div, in this case #two.

Answer 3

Considering the following HTML:
<div id="parent">
<div id="left">Left</div>
<h2>Heading</h2>
<div id="right">Right</div>
</div>
CSS Code:
#parent {
width: 80%;
margin: auto;
display: table;
}
#parent div, #parent h2 {
display: table-cell;
}
#left, #right {
width: 50px;
}
Demo: http://jsfiddle.net/MAhmadZ/pMfLx/

Answer 4

try this out
i think it may solve your problem
<style type="text/css">
div{
display: inline-block;
vertical-align: top;
height: 50px;
border: 1px solid red;
position: static;
}
#one{
float: left;
width: 100px;
}
#three{
float: right;
width: 100px;
}
</style>
<div id="outerDiv" style="width: 500px;height: 500px;border: 1px solid red;">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
<script type="text/javascript">
var spaceLeft = document.getElementById("one").offsetWidth;
var spaceRight = document.getElementById("three").offsetWidth;
var totalSpace = document.getElementById("outerDiv").offsetWidth;
document.getElementById("two").style.width = totalSpace-(spaceLeft+spaceRight+4) + "px";
</script>