I am trying to find out how to horizontally center a floated layout. If I have a head, 2 coumns underneath, and a footer, how do I center that on the page. I used to make an absolute position div and put it at 50% and apply a negative magin half the total width of the div and put the floats in that. But how do I do it without the absolute div?
This is what I use: #container { margin-left: auto; margin-right: auto; width: 960px; } <body> <div id="container"> <!-- header, columns, footer --> </div> </body>
That works in FF. IE6 though wants/needs/demands body { text-align:center; } else its off by a few px.
I use: #container { margin:0 auto; width: 770px; } width 770px because then it will also fit with 800x600 resolution, there are lots of people who still use it.
None of that is going to work. The idea of a left float is to float left, not be centered. The only thing you can do is contain it in a div wrapper and center that. But that's still kind of goofy. If you need something centered, don't use float.
That´s correct, knew that. But this : #container { margin:0 auto; width: 770px; } will center the container div. As long as you don´t have a float property in it.
See "2 column--apparent equal height" for a float layout that's centered on the page. Or for that matter, look at nearly any of the site pages. As de kat said, the text align thing is a bug only available in IE quirks mode. cheers, gary
Bullocks. I use centered layouts and floats together all the time without any problems, or the need for hacks either. If you're worried about the container not containing the floats, then add overflow: hidden; to the #container style rule.
So your saying if i put it like this: #container { margin:0 auto; width: 770px; float:left; } It wont move to the left?
this may help. it will center anything, out (above) of the flow. Just make sure "margin-left:" is half the width of the "width:". Hope that helps. #Layer2 { position:absolute; margin-left:-385px; width:770px; height:500px; z-index:1; top: 15px; left: 50%; background-image: url(http://www.domain.com/images/bg.gif); }
"I used to make an absolute position div and put it at 50% and apply a negative magin half the total width of the div and put the floats in that." whoops, sorry I should have read more carefully. This may help more: * {margin:0 0 0 0; padding:0 0 0 0; border:0;} body {} #header {width:770px; height:40px; margin-left:auto; margin-right:auto;} #main{width:770px; margin-left:auto; margin-right:auto;} #mainleft{width:385px; float:left;} #mainright{width:385px; float:left;} #header {width:770px; height:40px; margin-left:auto; margin-right:auto;} <body> <div id="header"></div> <div id="main"> <div id="mainleft"></div> <div id="mainright"></div> </div> <div id="footer"></div> </body>
HDaddy you are correct, it will not center, but float to the left. I think Dan thought you meant the centered container couldn't have any floats inside it (which is can) : ) Whoops I bet you meant "#footer for that last one. All you've done here is centered everything seperately, which you can if you want to but you don't need to. It is less code to wrap the whole centered part in something and set width and margin: 0 auto on that. Also, so you know, you can shorten your margin and padding declaration in your reset : )
Alright, alright, here's the more optimized version: * {margin:0; padding:0; border:0;} body {} #container {width:770px; margin:0 auto;} #header {width:770px; height:40px;} #main{width:770px;} #mainleft{width:385px; float:left;} #mainright{width:385px; float:left;} #footer {width:770px; height:40px;} <body> <div id="container"> <div id="header"></div> <div id="main"> <div id="mainleft"></div> <div id="mainright"></div> </div> <div id="footer"></div> </div> </body>
Just as a general rule of thumb, you shouldn't float anything you want centered. Also, I was specifically referring to floating elements INSIDE the container DIV. Like this example: http://www.dan-schulz.com/temp/4columnlayout/
Oh, you can get even more optimised : ) Header doesn't necessarily need its width declared-- it's a div which is a block and blocks try to be 100% width of their parents. So stating a width would only be done if IE needed it for Haslayout (which is being triggered by the height declaration so you're cool there : ) Same goes for #main and #footer. Then, you've got two floats in #main side by side, which should work fine except IE has issues sometimes (which are not hard to work around, but we're being lazy here : ). So, what is often easier is, if #mainleft is already first in source, just float that one (with a width), and give no width at all to #mainright. Mainright will be 100% width in all browsers except IE, sliding under the float, which unless there's a background colour on #mainright you'd never know, cause all the text in #mainright will be on the side of the float. IE will not let #mainright slide under, but visually this looks the same. To be safe for everyone, then, you float #mainleft (with a width), and set NO width on #mainright, but merely give it a left margin a little bigger than the width of #mainleft. * { margin: 0; padding: 0; } img { border: 0; } #container { width: 770px; margin: 0 auto; } #header, #footer { height: 40px; } #mainleft { width: 385px; float: left; } #mainright { margin-left: 395px; } Code (markup): Haslayout might need to be triggered on #main, I'm not sure, in which case then you could still give it the 100% width it's supposed to already have by default. You can also lump stuff together in one declaration if their info is the same (header/footer).