Explore Courses Blog Tutorials Interview Questions
0 votes
in Web Technology by (20.3k points)

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 the center after resizing the container.

So I set:




#center{margin:0 auto;width:100px;}

But it becomes:

[[LEFT]       [CENTER]              ]


Any tips?

1 Answer

0 votes
by (40.7k points)

In CSS, you can use the divs like so (floats first):

<div id="container">

  <div id="left"></div>

  <div id="right"></div>

  <div id="center"></div>


Note: You can also float right, then left, then center. The important thing is that the floats come before the "main" center section.You often want last inside #container this snippet: <div style="clear:both;"></div> which will extend #container vertically to contain both side loats instead of taking its height only from #center and possibly allowing the sides to protrude out the bottom.

Related questions

Browse Categories