Take the 2-minute tour ×

I have seen several methods for creating simple fixed width single column layout using css. I like the one shown here because there is very little code involved and it works on every browser I have tried.


body {
  text-align: center;

#container {
  margin: 0 auto;
  width: xxxpx;
  text-align: left;


  <div id="container">
    ...entire layout goes here...

The author mentioned that he received some criticism. I not a web developer so I wanted to ask the community what they thought about this approach. More specifically is there a better/more compatible way to accomplish this?

share|improve this question
I've been using this approach and it works great... haven't encountered any issues with this. –  jpdelatorre Jan 7 '10 at 2:30
add comment

8 Answers

up vote 14 down vote accepted



share|improve this answer
+1 for mentioning the DOCTYPE. That's required (in IE at least). –  cletus Jan 7 '10 at 2:28
+1 Really nice answer James –  Doug Neiner Jan 7 '10 at 3:23
add comment

margin: 0 auto; ( or margin-left: auto; margin-right: auto; ) is really the simplest way., and there's really no issue with sticking with it for centering content.

I'm of the opinion that the width tag should be max-width: xxxpx. For those on mobile browsers with a tiny 360px or smaller width, they will simply get the biggest possible size for your container that fits in their screen size (but then your inside layout will have to scale gracefully too.) Also of note is that max-width does not work on IE6.

share|improve this answer
add comment

The approach that you have outlined is the one that I use. I have been using it for several years and it hasn't let me down. I can't think of what the criticisms would be.

share|improve this answer
add comment

margin: 0 auto; is the best method for centering.

The author of article you reference stated that text-align: center; was required to support IE5/Win. I think you can safely ignore this as IE5 is well and truely dead.

share|improve this answer
add comment

I find it a common practise to use margin: 0 auto; to centerise your element.

Also styling tags like <center> are deprecated in current version (HTML 4.01).

share|improve this answer
add comment

The best way to do this is indeed creating a div, say, 960px wide and giving it {margin: 0 auto;}.

What I also like to do is to give that div some {padding: 0 15px;}. This way the centered area is actually 990px which is still perfectly center-aligned in 1024x768 monitors whilst the padding provides a cushion in the edges for users using smaller monitors or Google Chrome.

And going a step further, I actually creater a wrapper div that just takes up the entire page and then center a content div inside it. This lets me take advantage of things like a footer that always sticks to the bottom of the screen regardless of content length (such as http://ryanfait.com/sticky-footer/).

share|improve this answer
add comment

I think this is a better work around

This will center an entire page's content when contained within the div "#pagebox
of 600px wide.

body{ text-align:center; min-width:600px; }
#pagebox{ text-align:left; width:600px; margin-left:auto; margin-right:auto;}


 MSIE 5 doesn't center based on auto left/right margins, but "text-align:center"
 does center top divs

 Specify a min-width for the body as wide as the 'pagebox' element itself. This
 prevents negative (i.e inaccesible) left margins in narrow browser windows when
 using Navigator 6+/ Mozilla on WIndows

Hope it helps

share|improve this answer
add comment

Honestly, I just use the <center> tag. It's outdated, I suppose (and you get some complaints about it, probably depending on your doctype) but it works.

-- Edit

Well, the downvotes on this are reasonably predictable, but I do hope someone can outline exactly why (outside of pedanticness) this doesn't work; because it's my understanding it works in all browsers. I could be wrong :)

share|improve this answer
I'm amazed at your ability to hold a grudge cletus :) –  Noon Silk Jan 7 '10 at 2:30
you just gone to the no-no zone of the webbies ;) –  rockacola Jan 7 '10 at 2:35
rock: Heh, It's pretty expected, I'm just a bit disappointed by the lack of logical reasoning (though that seems typically with the css fanatics :P) –  Noon Silk Jan 7 '10 at 2:36
I also down voted you ;) not for my support to css but by saying it's ok not to move forward (in terms of technical skills). Especially in webbie world, everyone is (still) in pain because lack of standardisation and enforcement. –  rockacola Jan 7 '10 at 2:40
@silky also, if you able to compile your homepage, your compiler will throw error on 'lack of DocType' and 'incorrect syntax in <head>. But that doesn't happen in web programming ;) –  rockacola Jan 7 '10 at 2:43
show 7 more comments

Your Answer


