FLOATED DIV INSIDE a CENTERED DIV

Get Started
1

Hi guys!

How do you do this?


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

This is the HTML

I want to center the content but the #left, #center #right are floated.
the tendency of the Content if height is not specified… the #left #center etc. is outside the Content.

I want to see the #left #center #right is inside the Content div tag in browser the height of the #left is dynamic… it can be long
it can be short.

Here is the CSS


#content{
width:50em;
margin:0 auto; /*for centering (or if you have other way to center it*/
}

#left, #center, #right{
width:32%;
float:left;
height:15em; /*This is just to see the panels*/
margin-left:1em;
}

Thanks for the help

2

Just add this in red:


#content{
  width:50em;
  margin:0 auto;
  [COLOR="#FF0000"]overflow:hidden;[/COLOR] 
}

The overflow: hidden; causes the container to wrap around the floated items.

One other thing to watch out for is the margins on those floated boxes. Better to do something like this:


#left, #center, #right{
width:32%;
float:left;
height:15em;
margin-left:[COLOR="#FF0000"]1%[/COLOR];
}

Otherwise, chances are one of your floats will drop.

3

Yeah with my margin-left:1em the rightmost div will go down.

Is min-width and max-width are now supported in all browsers?

Thanks a lot Man!

4

Yes, it’s fully supported … (unless you consider IE6 a browser, but it’s well past its use by date now).

5

Your the man Ralph M! yeah I don’t test in IE6 now…