Centering a webpage without the wrapper div
Whether you knew it or not…still, most don’t; you can center a webpage by directly styling the body tag. How is this possible
you ask? Well, the sole purpose of the wrapper div is to give IE5 the support it needs to center correctly; so if you’re anything like me (or Microsoft) - you’re putting an end to your IE5 development.
The following method works pefectly in IE6+, Mozilla/Firefox (all), Opera7+, and Safari(all).
Centering a webpage with CSS
body {
margin:0 auto;
width:760px;
/* adjust width as needed */
}Voila!
Your page is centered! And yes, it really is that simple.
Todays question and book information
The winner of today’s contest will receive a copy of 101 Essential Tips, Tricks, and Hacksfor CSS by Rachel Andrew.
Describe a hypothetical tag-team cage match-up between Jeffrey Zeldman and Molly Holzschlag vs Eric Meyer and Rachel Andrew
Please remember to put your answers encapsulated within a <blockquote> element, and the regular discussion as normal.
Awaiting some hilarious responses…
December 22nd, 2005 at 7:11 pm
Of course, the match would go nowhere. All four of them would sit down in the middle of the cage and discuss the application of web standards to the match at hand. In conclusion, the consensus would be that a new microformat should be applied to describing wrestling matches. Zeldman would immediately schedule a talk at SXSW concerning the new format, WWF (World Wrestling Format), while Eric Meyer writes a book about it. Molly would post every day for a week about the uselessness of wrestling, but the efficiency of the format, and Rachel Andrew would contact WWE and UFC about using the format on their own sites.
-Derek
December 22nd, 2005 at 7:17 pm
It is interesting the body backgrounds still run all the way to the edge, regardless of the body margin. That seems a little counter-intuitive.
December 22nd, 2005 at 11:59 pm
Okay… this has just saved me a ton of hassle! Thanks!
Now… as for the question at hand:
December 23rd, 2005 at 11:50 am
@Justin: Yea, that seems to be the only draw back with it. I have no idea why it does that.
December 23rd, 2005 at 6:56 pm
What a beautiful Merry Christmas present! Thanks for the tip! I’ve thought about doing that, but as is usually the case, I was too scared to try (I figured messing with the body would mess up the background (I usually like it to go to the edge of the page). It’s nice to know there’s another solution to the #rap, #wrap, or #container. I just need to be more gutsy I guess, hmmm?
December 24th, 2005 at 4:52 pm
Natalie, ya just gotta try things out. You really have to question things you’ve learned and why you do what you do…there are several occassions where I have scripts or css hacks that were meant to support ie5.x- or ns6 or whatever… and knowing that I really don’t care much to give support to such archaic browsers, there is often a much easier way to do things.
December 26th, 2005 at 3:59 pm
Awesome
December 26th, 2005 at 6:56 pm
Have you ever read something and thought you knew it, then a few days later sat down to do something and your mind blank. I mean you know whatever it is, but can’t put your finger on it right away. Yet you remember you just read about it so you start trying to go through your RSS feeds to find it, and realize you can’t even find that! Well thats what happened with this little diddy.
Long story short - THANKS Dustin, it is aways the simple things we forget!
December 28th, 2005 at 1:03 pm
Why wouldn’t you want a wrapper div? I almost always have a #page element within my body tag that catches a bunch of style for my overall designs. I usually set the text-align to center on the body tag and then set my first div’s width and margin to “0 auto”. As long as you set the text-align on that first div back to left, then you have a centered webpage that works…even for IE5.
December 28th, 2005 at 9:03 pm
Jason, you might have missed the point to this one ;)
I mentioned that this did not in fact support IE5 on purpose. Hence “You can do it just on the body.” That was it. That was the point. Lesser markup - easy css :)
January 2nd, 2006 at 6:17 am
Hi,
I have been trying to centre a page 800px wide for screens set to 1024px. I am only interested in IE6/Firefox. My page is still in its infancy and has some banner images located with position absolute using div #id. It also has some text. Using your body tag mark up, the text centres OK but the images refuse to leave the left margin. When I changed the postioning to relative, the images centred but it was then difficult to get them where I wanted on the page.
I don’t know that much about CSS. Am I missing something obvious?
Thanks,
Barry Brotherton
January 2nd, 2006 at 7:11 pm
It may not be my place, but in case Barry comes back, I would either try a % on the absolute positioning (maybe around 20%) instead of a set dimension (px). If that isn’t quite right, I’d put the images inside a relatively positioned rapper and then position them absolutely within the rapper. In this case, the rap is the one centering how you want and then you can go from there and position the images inside it offset how you want them.
January 3rd, 2006 at 4:58 am
Thanks Natalie,
After I submitted my query I did try an experiment. I put position Relative in the Body element (CSS) and that centred everything including the images. However I don’t really understand how that worked!!
Barry
April 28th, 2006 at 2:07 pm
Brilliant! I have been searching forums for this for ages and got nowhere. I had to make the positioning ‘relative’ to get it to work properly in i.e. 6.0 as it kept needing to be refreshed to get it to center (weird!)
You have saved me a lot of grief. thanks.
May 3rd, 2006 at 6:28 am
Looks like that goes in the under the body area only, under this ?
May 3rd, 2006 at 6:30 am
That didn’t print my tags. I’ll try again. The centering instructions go under the closing head tag?
May 4th, 2006 at 10:31 am
Dude, you rule, thank you!
May 10th, 2006 at 3:10 pm
Still no reply, I’ll ask one more time. On the “centering a web page with css” at the top of this page. It looks like you are saying that this command goes right after the first body tag, is that correct? Because I have never seen a ultimate parameter tag in the body area before, only the head. Let me know please where this tag goes. Thanks!
May 10th, 2006 at 4:00 pm
Hi Sam, sorry, I just figured someone else would have answered this by now.
Basically this is a CSS property.
You put the style rules inside the <style> element. Eg:
<html><head><title>My webpage</title><style>body { margin:0 auto;width:760px; }</style></head><body><p>My page here</p></body>May 13th, 2006 at 3:29 pm
Thank you very much! Sam
July 10th, 2006 at 3:27 pm
I just want to request any suggestions you good people might have on how to fold a webpage on my computer monitor screen so that the lines of text will wrap around at the extreme right side of the screen, because sometimes a webpage has text lines that go beyond the limit of my screen and I have to push the display to the right to read to the end of the lines and then to the left to read the brginning of the lines. I am not into composing webpages for online publication.
I have an application that can change the font size of the text, but it does not work with the situation I am describing however much you reduce the font size of the text — the text lines would still be extending beyond the lateral sides of my screen.
thanks for any tips.
gerry
July 15th, 2006 at 6:36 am
Nice trick.
But i don’t get the benefit over div tag.
Another thing is that it will always work because no one use IE5 any more.
August 11th, 2006 at 1:23 am
I wonder how to fix the postion of a div tag in the center of displayable area (when scrolling it’s still in place)?
August 16th, 2006 at 3:48 am
Bit of a late comment now, but nevermind…
I like this technique a lot but I’ve just tried to use it with a max-width set for the body. Of course this works great in normal browsers but IE can’t cope. So I tried to use the expression technique to fake it in IE http://www.svendtofte.com/code/max_width_in_ie/ but for some reason unknown this doesn’t work without using a wrapper div. Something seems to conflict there.
Booo!
November 17th, 2006 at 6:34 pm
[...] While in the process of writing a website tutorial, I googled for info on using ‘wrapper’ <div>’s and came across this revelatory article by Dustin Diaz. [...]
May 9th, 2007 at 12:00 pm
It doesn’t center the page for me. I have body { background-color: #6699CC; padding-left: 20px; margin:0px auto; position:relative;} . I have tried without position and without the padding, but with no better result. What is wrong?
My div’s are floating. I would really appreciate your help.
/Anette
May 9th, 2007 at 1:38 pm
Hi Anette, you need to set a width on the body. Eg:
May 10th, 2007 at 12:31 am
Many thanks! Now it works!
June 17th, 2007 at 12:40 am
Thanks for this tip Dustin.
December 2nd, 2007 at 10:02 am
[...] There’s a very simple way to center a web-page horizontally, using only a smidgen of CSS: [...]