centre layout

[RobinTibbs]

ok, i have concocted a nice enough layout, but i want to know the best way of getting it so its centred in the browser window rather than taking up the whole viewport. many thanks. hope that makes sense :)

[obsidian]

Easy 3 step process:

1. Decide on how wide you want your layout to be.

2. Place a text-align: center; on your body

3. Set a wrapper div (I usually actually call it id="wrapper") around your entire content with your centering CSS:
[code]
#wrapper {
  text-align: left; /* To offset the center of the body */
  margin: 0 auto; /* This is the key (right and left auto margins) */
  width: 760px; /* Or however wide you decided in step one */ 
}
[/code]

That's really all there is to it. Hope this helps!

[jcombs_31]

The text alignments are not needed.  Just set the auto margin and the width.

[obsidian]

[quote author=jcombs_31 link=topic=123140.msg508609#msg508609 date=1169219908]
The text alignments are not needed.  Just set the auto margin and the width.
[/quote]

The text alignments [b]are[/b] needed for some non-mainstream browsers.

It acts as a safety net more than anything else... although jcombs_31 is right that for IE 5+ and FF, it is not needed.

[jcombs_31]

what browsers DO need it?  I know IE, Opera, Firefox, Safari, Netscape, and Konqueror all seem to handle it fine.

[obsidian]

I've had problems with IE5, Netscape, AOL, Konqueror and IE5 Mac at different times, and that safety net has fixed it for me in every case. Grant it, it may have been caused by other display elements in the CSS, but having that as a safety net fixes it nonetheless, so I'm adamant about recommending people to use that as a precaution in their displays.

[RobinTibbs]

thats worked great thanks, the "margin: 0 auto;" in the 'wrapper' css is the 0 for the top/bottom margins then?

[jcombs_31]

yes, you can change it if you want to increase the top/bottom margins.