Centering a div in CSS

I've been wondering about this lately...

If I have a div that's the container for my layout and I want to center it, what's the best way? Generally, the div that I use to contain my layout is floated left, so the auto margins don't work.

I end up with code that looks like this...

Now this may not seem like a big deal, but when you need to add padding or a border without extending the width of the div in certain browsers, it can end up quite messy, with multiple more divs starting out your page.

Is there a better way to do this? Or am I stuck with this mess?

I'm not sure if this is what you're talking about, but you could always do...

#container {
width: 750px;
width:: 0 auto;
}
#content {
float: left;
}

Should work

Originally Posted by Jeff Andersen #container { width: 750px; width:: 0 auto; } #content { float: left; } Should work

You have to have the width of 750px in there for content because divs which are floated left by default have no width, and they'll go on forever. Also, this is basically the same as my code except with the shortcut on the margins (I'm assuming you meant margin instead of width ). Even though the CSS is a little shorter, you still end up with "div soup" (as I saw someone call it ) in the HTML code.

I should probably be more clear with what I'm asking...Is there a way to center a div which is floated left without using another div? It also needs to validate. So far I haven't come across a way, but maybe someone here knows.

Thanks

yeah the easiest way to do this is as so

in your div add these

margin:0 auto;
width:1000px;

To make this work you always need a set width and the div should be centered.

It's difficult to understand your question properly. Center a div which is floated left without using another div?

Floating left will always move that div to the left, the ONLY way to center a div is with relative positions using % or auto margins. But as soon as you float it you take it out of the normal document flow.

Best answer is Jeffs, you have to specify a width so that the auto centering margins will center the whole container.

Jeff's code is what I was already using.

Thanks for the answers guys...an example of how this gets really messy is the start of this page that I coded:

The page starts with 5 divs, and it ends with even more </div>s.

Anyway, I guess that's the best way to do it. Thanks for the help.

Well although I don't recommend div soup, I do believe you can achieve what you want with dramatically less code than using tables for structure.

Try using
#container {
width: 750px;
width: 0 auto;
}
#content {
float: left;
width: 750px;
}

I use this method all the time for my centering of websites, if you want to limit the content all you have to do is set the width... but in order to use the auto margin your wrapper or container has to have a width set or else it's assumed to be 100% width.

i usually align text center the bodytag and div_wrapper margin left:right auto and top:bottom 0...works fine ewith ie and ffox