CSS auto-fit container between float:left & float:right divs

Question

I'm looking for a way for CSS(3) to be able auto adjust the width of a center container div between a float:left div and float:right div.

The center div also needs the ability to have a min-width set, similar to google+ -> home where the center content is auto fitted between the left navigation buttons and the right chat pane. Then when the screen width shrinks past a certain point (detected with javascript) the chat pane minimizes to save space.

Here is an active mock-up to make work: http://jsfiddle.net/9vrby/

Also, here is the css code I'm using now:

#left{ float:left; width:200px; height:400px; border:1px solid #000; }

#center{ float:left; width:auto; height:400px; border:1px solid red; }

#right{ float:right; width:100px; height:400px; border:1px solid blue; }

Please let me know if you need more information, and thanks in advance for the help.

Answer 1

On #center, drop float: left and add overflow: hidden. Also, #center needs to be moved to last in the HTML.

http://jsfiddle.net/thirtydot/9vrby/14/

This works in all modern browsers and even IE7.

Answer 2

One trick is not to use floats but display:table-cell.

http://jsfiddle.net/9vrby/8/

HTML:

<div id='left'></div>
<div id='center'></div>
<div id='right'></div>

CSS:

#left{ display:table-cell; min-width:200px; height:400px; border:1px solid #000; }
#center{ display:table-cell; min-width:200px; width:100%; height:400px; border:1px solid red; }
#right{ display:table-cell; min-width:100px; height:400px; border:1px solid blue; }

Beware though, this method doesn't work in IE7 (and below, but who still supports that crap right?). But perhaps you can take a look at CSS3Pie which enables you to use CSS(3) for browsers that officially don't support it, like IE7. So perhaps display:table-cell will work aswell.