Using the <body> element as a wrapper

This is a tiny little blog post that a lot of you will already be aware of, however in my experience I’ve found that for every one person that does realise this, there are about two who don’t.

A lot of developers will have a wrapper <div> in their markup in which the page is contained. It might look something like this:

<!-- Markup -->
<body>

  <div id="wrapper">

    [content]

  </div>

</body>

/* CSS */
body{
  font-family:sans-serif;
  background:#fff;
  color:#333;
}
#wrapper{
  width:940px;
  margin:0 auto;
}

It most situations this could be simply rewritten:

<!-- Markup -->
<body>

  [content]

</body>

/* CSS */
body{
  font-family:sans-serif;
  background:#fff;
  color:#333;
  width:940px;
  margin:0 auto;
}

You <body> is a container.

Obviously there will be some instances where this won’t be suitable—and you’ll spot what those are as you come across them—but for the most part, you can drop that unnecessary wrapper <div> and use the <body> element as a wrapper.

Hat-tip to Simon Wiffen for showing me this a while ago.

Tweet Follow @csswizardry

By Harry Roberts on Sunday, January 23rd, 2011 in Web Development. | 16 Comments »

16 Responses to ‘Using the `<body>` element as a wrapper’

Ivan Nikolić said on 23 January, 2011 at 2:29 pm

Been thinking about using this in practice for some time now, but always found myself resorting to wrapper div, to me it seems like that’s a much more reliable solution than using body element. But maybe, one day… :)
Leon said on 23 January, 2011 at 3:30 pm

Or html for that matter.

If you’re using WordPress you’re probably stuck with #wrapper as you need to leave the body’s background-color alone in order to change the background colour in the admin area.
Harry Roberts said on 23 January, 2011 at 3:45 pm

@Leon: I’m not sure I follow; I don’t use a wrapper <div> and my site runs on WP. I have experienced no ill effects of doing this…
ArminC said on 23 January, 2011 at 5:17 pm

I think @Leon meant that you can’t use it with wp if you want the body’s background color to be editable via the wp admin panel
Ahmed El Gabri said on 23 January, 2011 at 5:48 pm

If you are working on a multi-language website this won`t be a good idea, lately i was working on a project that includes RTL styling i started using the body element as my wrapper but when i tested it in IE7 & below crazy stuff happened, it was fixed only after i added that extra div.

So it might be useful but always choose wisely when to use it.
Leon said on 24 January, 2011 at 9:56 am

@Harry — should have made it clearer; Armin is right. I mentioned it because it is quite annoying as I’d rather not add #wrapper to my theme’s CSS; wp could achieve the same effect by setting the html’s background color rather than body.
Alessandro Berlato said on 24 January, 2011 at 10:17 am

Good tecnique, I use it very often.
Alan Ascerta said on 24 January, 2011 at 1:25 pm

I’ve been using this css method for a while now and so far haven’t come across a situation where it doesn’t work with my design.
CHJJ said on 25 January, 2011 at 5:17 pm

The root element can be used as a wrapper as well. A lot of people are afraid to style these elements for some reason. Margin properties set to ‘auto’ behave strangely on the root element in IE7, but that is the only strange thing I’ve noticed.

These are some of the most commonly misunderstood concepts in CSS. People tend to repeat the misconceptions that styling BODY or HTML to acheive certain affects qualifies as a “hack”. To try to dispel rumors, I wrote an article detailing the relationship between BODY, HTML, the initial containing block, and the canvas a little while ago. Hopefully one day there will be less cluttered markup around when people start realizing body and html can, for the most part, be treated like any other box.
Jamie Marciano said on 17 February, 2011 at 2:30 pm

Thanks, like a lot of people i’m always holding back on styling the html and body elements for no particular reason actually, now that i think about it. Now that i’ve read this article i’ll be doing it a lot more!
Ahmed El Gabri said on 5 March, 2011 at 7:42 pm

I think IE doesn`t like this & you have to force scrollbars using (overflow-y:scroll) including IE9
Davin said on 24 March, 2011 at 5:02 pm

I think most of the issues that people have with styling the html and body tags is that they don’t do this first.

html, body {
height: 100%;
}
Evan Byrne said on 20 May, 2011 at 3:53 pm

I can see a number of reasons why not everybody does this:

- The body tag doesn’t work the same way as a simple div. It stretches the length of the entire page, regardless if the content reaches the bottom of the screen.
- You want to have different backgrounds for the wrapper and body (because CSS3 multiple backgrounds weren’t supported).
Aaron Bregg said on 29 July, 2011 at 8:40 pm

Actually I have another reason you should absolutely NOT use body in place of a wrapper/container. Jquery UI and other Js will not work correctly using this way. I know you mean well with this article but you should put a disclaimer at the top. :)
Kristina said on 4 August, 2011 at 9:21 pm

Interesting article! I’ve gotta agree with Evan on this one: using the body element as a wrapper might work fine for a simple one-color background (like on this site) but wouldn’t work so well with multiple background colors and images for a more textured/layered site (before CSS3). I’ve run into this problem many times with large, complicated sites (1,000+ pages).
Jitendra Vyas said on 19 August, 2011 at 7:55 pm

I’m agree with Evan.

16 Responses to ‘Using the <body> element as a wrapper’

Leave a Reply

Using the `<body>` element as a wrapper

16 Responses to ‘Using the `<body>` element as a wrapper’