sadmicrowave sadmicrowave - 1 year ago 96
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

div and

The center div also needs the ability to have a
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:

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 Source

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

This works in all modern browsers and even IE7.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download