How to align 3 divs (left/center/right) inside another div?

Question

I want to have 3 divs aligned inside a container div, something like this:

[[LEFT]       [CENTER]        [RIGHT]] 

Container div is 100% wide (no set width), and center div should remain in center after resizing the container.

So I set:

#container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;} 

But it becomes:

[[LEFT]       [CENTER]              ]                               [RIGHT] 

Any tips?

Answer 1

With that CSS, put your divs like so (floats first):

<div id="container">   <div id="left"></div>   <div id="right"></div>   <div id="center"></div> </div> 

P.S. You could also float right, then left, then center. The important thing is that the floats come before the "main" center section.

P.P.S. You often want last inside #container this snippet: <div style="clear:both;"></div> which will extend #container vertically to contain both side floats instead of taking its height only from #center and possibly allowing the sides to protrude out the bottom.