Two floated divs with a flexible div in-between

Question

I need the following in a header of fixed width:

1. A div of varying width floated left.
2. A div of varying width floated right.
3. 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;
} 

​