10

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. 

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

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

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?

Toby Speight
  • 23,550
  • 47
  • 57
  • 84
Lawrence Barsanti
  • 27,683
  • 10
  • 43
  • 64

8 Answers8

16

The "margin: 0 auto" is the best way to do it, you just have to be sure to have the right doctype for it to work. I always use XHTML strict - others will work too. If you don't have a good doctype, the content won't center in IE6

To implement the XHTML strict doctype, put this above your node, as the first line in the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
James Maroney
  • 2,926
  • 3
  • 21
  • 27
2

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.

Crast
  • 14,648
  • 5
  • 39
  • 51
2

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.

calvinlough
  • 352
  • 3
  • 13
1

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.

AUSteve
  • 3,163
  • 20
  • 36
1

I think this is a better work around.

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

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

Comments

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.

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

Hope it helps

Qwerty
  • 19,992
  • 16
  • 88
  • 107
Joberror
  • 5,590
  • 2
  • 18
  • 15
0

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).

Community
  • 1
  • 1
Trav L
  • 13,104
  • 5
  • 28
  • 37
0

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/).

Tom
  • 28,567
  • 26
  • 84
  • 120
-8

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 :)

Noon Silk
  • 51,625
  • 6
  • 84
  • 103
  • I'm amazed at your ability to hold a grudge cletus :) – Noon Silk Jan 07 '10 at 02:30
  • you just gone to the `no-no` zone of the webbies ;) – Trav L Jan 07 '10 at 02: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 07 '10 at 02:36
  • 2
    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. – Trav L Jan 07 '10 at 02:40
  • 1
    @silky also, if you able to *compile* your homepage, your compiler will throw error on 'lack of DocType' and 'incorrect syntax in ``. But that doesn't happen in web programming ;) – Trav L Jan 07 '10 at 02:43
  • rock: only if your compiler was in strict mode. I just don't have much care, for web standards really :) (and that's not to say I don't do my best to meet them, when it's necessary [for accessibility, or otherwise]). It just seems to me there is no practical reason to not use the 'center' tag; the reasoning I've seen for it is not legitimate, IMHO. Clearly, though, 4 people disagree, but without evidence, that's pretty meaningless to me. – Noon Silk Jan 07 '10 at 03:07
  • @silky I feel it is always bad practice to knowingly use depreciated *anything* (which `center` is as of HTML 4) in the programming/markup world. `center` is supported now, but may not be in future browsers. From a semantic point of view, CSS should be used for *presentation* and HTML for markup. By using `
    ` you are saying *how* to display the content instead of describing the content. Also, for reference: http://stackoverflow.com/questions/1798817/why-is-the-center-tag-deprecated-in-html ... And of course, I downvoted you :)
     – Doug Neiner Jan 07 '10 at 03:22
  • Doug: Cheers for the reasoning :) (It's 'Deprecated' by the way, not 'Depreciated (like money)'). It's supported without a doctype spec, and I would expect it will remain that way (you'll need to opt-in to make it deprecated, I imagine). And the semantic argument is certainly one *type* of argument, but it has no value if the website itself is still fully accessible and so on and so forth (i.e. it's a personal preference). – Noon Silk Jan 07 '10 at 03:35
  • *"It's supported without a doctype spec"* Not quite, without a doctype browser goes into quirk mode and renders differently depends on vendors. I think modern webbies would prefer sites to **crash** rather than **display anyway**. – Trav L Jan 07 '10 at 03:46
  • rockacola: No doubt that's what they'd prefer, that's, to be perfectly honest, because they don't know the reason it is like it is now. They may not even have jobs :) And it *may* render differently on different browsers; it's still possible for it to be the same. Doctypes *aren't* required. – Noon Silk Jan 07 '10 at 03:50
  • @silky "I expect it will remain that way" I agree its a pretty good guess, *but*, if you had to guess between a browser dropping support for a supported property or a deprecated (thanks :) element, I'd put my money on the deprecated element. I used to feel the same way as you about 2 years ago, then I read "Designing with Web Standards" by Jeffrey Zeldman, and really grasped the importance of standards and semantic markup. It was a steep learning curve, but in the end I feel I code faster/leaner sites because of it. – Doug Neiner Jan 07 '10 at 03:50
  • Doug: I would guess the most likely thing is the group of people *determining* web standards don't agree, or the standard doesn't get accepted, or the standard doesn't get implemented properly by all browsers; it's for this reason you don't jump on the technology bandwagon when something first comes out; you give it a review and act cautiously. That's not the case here, but I do believe that's *more likely* then a deprecated item being dropped (when you're not even specifying that version of HTML for your document). – Noon Silk Jan 07 '10 at 03:53
  • You shouldn't use it because the html itself shouldn't be used for styling. The html is supposed to contain only the data which are then formatted using `css`. I wish I could downvote some comments here though. – Qwerty Jul 14 '14 at 16:10