sadmicrowave sadmicrowave - 22 days ago 6
CSS Question

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

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

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.