CSS auto-fit container between float:left & float:right divs
autosize, containers, css
Solution
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.
Problem
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.