hi amy

the usual way to do horizontal centering is CSS is the use of margin: auto.

in CSS:

body {
margin: 0;
padding: 0;
background: #DDD;
}
#content {
width: 80%;
margin: 0 auto;
background: #FFF;
}

in document body:
<div id="content">
<p>hello.</p>
</div>

margin: 0 auto;
is the equivalent of
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

Only one nested div is required in this case, which is usually fine as people tend to style it separately anyway.

- philip

There are still a lot of users out there with IE 6, and I don't think auto margin works for that. And if you don't have any reason to want another div, the way I posted allows you to get the desired effect with only semantic markup.

Hi Amy

Philip is right, to centre a design you set a width on a wrapper div and add auto margins for left and right.

To get round the IE6 problem add "text-align:center" to the body tag and then add "text-align:left" to the wrapper div.

- Castor

The whole point of the post was to show how you could do this without using a property intended to align text and without using a wrapper. :o)

Thanks for your comment.

"Barnes and Noble, here I come."

No amount of CSS reading will get you what comes from actually fighting with browsers - especially IE6.

I'm sure we would all love to be able to develop for Flash or [insert platform of choice here], but the fact is that CSS and XHTML rule the web right now. So the best thing for any developer to do is get their hands dirty and start learning how browsers are actually functioning behind the scenes. W3C specs are a wonderful thing.

My experience shows that the only way that works for horizontal centering is old school tags.

My experience shows that only the old school center tags work

Not trying to be argumentative, but margin: auto works in IE6; this very page (InsideRIA.com) uses it.

Using a <center> tag or the 'align' property in DIVs and other block-level elements is invalid in HTML 4.01 strict and XHTML 1.0 strict. If you're using a strict doctype, having an extra div in there may be annoying (and yes I find it annoying too), but is the current best practice. 'align' still works fine in transitional doctypes.

Of course, using padding as described in the article works, too. :)

Sometimes you're styling HTML you don't have control over, and so you can't add tags just for layout, and sometimes you're sending HTML as a service for others to style, so you try to avoid adding tags with no semantic meaning (yet you still need to style it where you're using it yourself). In either of these cases, you might not have the option of adding a tag just for controlling layout.

I'm not convinced that it's best practice to add tags with no semantic meaning when there are techniques available that allow you to achieve the same look without doing that.

@amy - so you style pages without access to the actual html files? That seems to be a strange work flow, to me anyway. Once the HTML guy is done with the page and hands it to the CSS guy, I would assume he can change the markup as needed to meet the project's requirements for layout. To each their own I suppose.

But I don't understand, the only way I was able to get your method to work was to add a margin: auto to the body with a width of 80%. If I left the margin out then it did not center on any browser. You did not mention using margin: auto on the body tag in your post so I'm confused as to what I'm doing wrong.

And I apologize but I'm not a big believer in the "semantics or nothing" way of thinking. I would like to but the reality of today's browsers pretty much prevent it. If we could code one time and it worked on everything as desired then that would be one thing. But when you have to insert hacks to get certain browsers to behave like all the others then semantics, sometimes, just have to go out the window.

I also suggest that if a large enough number of people in a community agree with a particular method, such as a container div with margin: auto to center content, then that method can be considered a standard and a best practice. Even if there is another and maybe better way of doing it. You may not agree with that method, maybe even suggest a better one, but that doesn't make it wrong.

I'll even go as far to say that if your solution doesn't include fixed width (which is extremely common) while the container div does, then the container div is a better choice. Semantics or no semantics.

In my experience, as philip mentions, margin: auto does work in IE6 with a proper doctype.

In the end, your method is creative and has its uses. But so does a container div.

@Travis

I'm thinking you didn't understand what I said about using a service. Maybe this will clarify https://www.insideria.com/2009/04/demystifying-web-services.html. In my case, I am responsible for both sides of the service at the moment, but I need to write the service so that I constrain developers consuming it as little as possible, and I also need to provide them with example CSS that works with the markup the service provides "as is."

I have to disagree with you about practices used by the majority being best practices. My experience, after mastering several languages, is that the majority of developers do not use best practices, and that best practices are evolved over time as the bleeding edge developers discover newer, lighter weight/lower maintenance ways to do things.

I'm sorry you couldn't get the method to work. I suspect that maybe you didn't put in the padding t "push" the body over. I can't show you the example I made for work, as that is covered under my NDA, but I will try to put together an example this weekend that demnstrates.

If you read the free pdf file I posted a link to, I believe that you can use the same technique found on page 10 there to center a fixed-width body tag without adding a div. That's why I posted the link ;-). I.e., you could use something like
body {
padding-left = 50%;
width = 300;
margin = -150;
}

I haven't used this for a body tag (I'm not a big fan of fixed-width pages and only do them when forced), but I have used something similar to center fixed-width tags inside of a (semantic, of course) div.

Thank you for your comments.

@amy - I discovered my problem, I was using fixed padding instead of percentage based.

"I have to disagree with you about practices used by the majority being best practices. My experience, after mastering several languages, is that the majority of developers do not use best practices, and that best practices are evolved over time as the bleeding edge developers discover newer, lighter weight/lower maintenance ways to do things."

But who develops these "best practices"? It must be some mystical group of people who magically know the best way to do something. Not the people in the field who actually do the work, right?

Oh I see, it's the "bleeding edge developers" that discover these best practices then? How does one join this group of highly advanced people that are so much more knowing than us mere mortals about best practices? I still say that if a certain method has been in use in the field for years that fits the majority of everyone's needs then that can be qualified as the best choice for that situation. By your own criteria the container div with margin: auto method is indeed the best practice for that particular situation. Your method addresses fluid layouts, the container div addresses both fixed and fluid layouts. The fact you don't like fixed layouts and only use them when "forced to" is irrelevant.

But don't just consider my opinion (or the other comments on this page) on the matter:

https://developer.apple.com/internet/webcontent/bestwebdev.html

Towards the bottom, best practices for centering content is to use a div with margin: auto. Actually they use margin-left; auto and margin-right: auto instead of the shorthand but that doesn't matter. This is according to Apple, bleeding edge developers? They also mention the IE6 workaround that Castor mentions about using text-align: center on the container and then use text-align: left on its children. That page was last updated over a year ago so I would say that the method has been in use for some time.

Oddly enough they mention using a fixed max-width on the body tag for a certain reason but don't expand on the topic enough for me to understand the point.

Again, your method is very creative and very useful in certain situations but you should not be dismissive of other people's suggestions just because you don't like them for whatever reason.

@Travis

Again, thank you for your comments. I don't mean to sound dismissive at all, and in fact I had already planned my next week's post, but you've inspired me to change it to "What is best practice?" or something like that :-).

As a FYI, max-width is not supported by some browsers that are still in use today, so I would only recommend using it in conjunction with other techniques that can guarantee that the width will be what you want.

Hello! Amy, Css is a great thing to learn and I'm trying to learn as much as I can and enjoying a lot but the only main problem I face now is with browsers display. Everything seems to show up just fine on Internet Explorer than when I preview pages on Firefox many times things looks not what I expected and designed and so vice versa. So I would definitely love to read a post on how to write css codes that is compatible with major browsers like IE, Firefox, Opera and Safari.

Angila - Home Assembly

center tags are still the best in my experience.