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

containers autosize css
sadmicrowave picture sadmicrowave · Jun 2, 2012 · Viewed 20k times · Source

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

thirtydot picture thirtydot · Jun 2, 2012

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.

Related questions

How is Docker different from a virtual machine?

I keep rereading the Docker documentation to try to understand the difference between Docker and a full VM. How does it manage to provide a full filesystem, isolated networking environment, etc. without being as heavy? Why is deploying software to …

Read More
How to run a cron job inside a docker container?

I am trying to run a cronjob inside a docker container that invokes a shell script. Yesterday I have been searching all over the web and stack overflow, but I could not really find a solution that works. How can …

Read More
How to change the size of the font of a JLabel to take the maximum size

I have a JLabel in a Container. The defaut size of the font is very small. I would like that the text of the JLabel to take the maximum size. How can I do that?

Read More