The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Divs next to each other...

Hey pplz...
I need help!
I'm working on a site a the moment. I've got a div for a header, then i need three divs across and then a menu underneath. I need the whole thing to be centered.
So I've got the header and it's fine, then I put in the three divs across, but they go underneath each other, so then I put in float: left; and they DO go next to each other, but they are no longer centered like the rest of the page.
How can you center divs with float: left?
Please help me because I'm stumped!
THanks guys!

IE5 and ie5.5. and ie6 (quirks mode) will use text-align centre to not only centre text but also centre nested block level elements even though it shouldn't

Other browsers use margin-left:auto and margin:right:auto on a block level element with a specified width in order to center.

However you cannot centre floated elements with any of the above techniques as floats are only float left or float right.

If your floats are a fixed sized and need to be a fixed with apart then you can put them inside another container and center that instead as shown by maxor above. (This is the easiest method.)

If you are expecting the floats to be centred but fluid distances apart then there is no easy way to do this without hacks. You can use display:table and display:table-cell for mozilla which is quite complicated but doesn't work in ie. You can also use display:inline-block for ie but the elements have to be constructed with inline elements. Both would need to be hidden from each other.

The easiest option is probably just to give the floats percentage margins that place them more or less where you want.

Sadly this is an area where browsers have not supported display:inline-block correctly which would have solved the issue easily.

Here is the page that I am working on - i'm just wondering what is the best way to do this... is this the best way to 'div'ide it up? Or would you suggest another?
And if this is the right way, how would you code it...

Well if they are all fixed widths then something like this should suit.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
text-align:center;/* for ie5 and 5.5.*/
min-width:750px;/* for moz*/
}
#outer{
width:750px;
margin-left:auto;
margin-right:auto;
background:yellow;
border:1px solid #fff000;
}
#header {
background:red;
border:1px solid #000;
margin:10px 0;
}
#left, #center, #right {
float:left;
width:248px;
background:green;
border:1px solid #000;
margin-bottom:10px;
}
#center {background:blue;}
#right {background:pink;}
#footer{
clear:both;
background:#ffffcc;
border:1px solid #000;
margin-bottom:10px;
}
</style>
</head>
<body>
<div id="outer">
<div id="header">
<p>This is the header text</p>
</div>
<div id="left">
<p>This is some filler text : This is some filler text : This is some filler
text : This is some filler text : This is some filler text : This is some
filler text : This is some filler text : This is some filler text : This
is some filler text : </p>
</div>
<div id="center">
<p>This is some filler text : This is some filler text : This is some filler
text : This is some filler text : This is some filler text : This is some
filler text : This is some filler text : This is some filler text : This
is some filler text : </p>
</div>
<div id="right">
<p>This is some filler text : This is some filler text : This is some filler
text : This is some filler text : This is some filler text : This is some
filler text : This is some filler text : This is some filler text : This
is some filler text : </p>
</div>
<div id="footer">
<p>This is some filler text : This is some filler text : This is some filler
text : This is some filler text : This is some filler text : This is some
filler text : This is some filler text : This is some filler text : This
is some filler text : </p>
</div>
</div>
</body>
</html>