Styling the html and body Elements

One of the most common ways to begin a layout in HTML is this:

<html>
  <head>...</head>
  <body>
    <div id="wrapper">
      <div id="container">
        ...
      </div>
    </div>
  </body>
</html>

That’s the ol’ double-wrapped div layout technique. But, since we already have the html and body elements, the div elements might be redundant in a lot of situations. So in order find out if CSS styles can be applied to the html and body elements just like our hard-working wrappers, I tested a range of CSS properties in FireFox 3, Safari 3.2, Opera 9.6, and Internet Explorer 6, 7, and 8. Here’s what I found.

You can add padding to the html and body elements and it works in all browsers tested. However, borders are a different story. While you can add a border to the html element in all browsers tested, IE6 and 7 only allow a solid border. Also, IE6 extends the border around the whole viewport, regardless of how much content is visible, even to the right hand side of the scroll bar.

Adding a margin to the html element works in all browsers tested except IE6, which ignores it. A background color on either the html or body elements will cover the whole viewport, regardless of margins.

One quirk I found was that if you have a background image on the html element as well as a top margin, Safari and IE7 will ignore the margin and display the background starting from the top left corner of the viewport. Firefox Opera and IE8 will display the background image inside the margin area just like normal elements. All browsers respect margins on the body element and place background images correctly.

If you try some crazy CSS like absolutely positioning the html element, you’ll find it actually works in Opera, and IE7 and 8. However, Firefox and IE6 will ignore it, and Safari will be extremely confused and display a broken mess.

So what does work? Adding a background image to the html and body elements works fine, and you can use it in place of multiple background images that only Safari currently supports. One of the solutions in the SitePoint book, The CSS Anthology uses this technique.

You’ll be happy to note that centering a single fixed width column is a snap:

html {
  background-color: #333;
}
body {
  background-color: #fff;
  width: 750px;
  margin: 0 auto;
}

The above code will work flawlessly in all the tested browsers.

There’s one big gotcha though: if you need to use absolute or relative positioning for elements inside the body element. I’d assumed that since all elements obtain a positioning context from the body element by default, if I centered the body element the default positioning context should adjust accordingly. I was wrong! The default positioning context remains fixed to the viewport; you have to add position:relative; to the body style to create a new positioning context:

body {
  position: relative;
  background-color: #fff;
  width: 750px;
  margin: 0 auto;
}

Refreshingly, that’s consistent across all tested browsers.

Share and Enjoy:

This entry was posted on Wednesday, February 11th, 2009 at 4:18 pm, contains 569 words, 9 images, and is filed under JavaScript & CSS. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed. The views and opinions in this blog post are those of its author.

This post has 17 responses so far

I remember playing around with this a couple of years ago and found that it was not working very well if you consider using XHTML and actually serving the document as application/xhtml+xml. This is a dimension I think you might have overlooked.
andrin
February 11th, 2009 at 7:22 pm
Problems with formatting the html tag are of no consequence, because you shouldn’t be trying to apply formatting to that tag anyway. body is the one to use.

February 12th, 2009 at 4:48 am
Problems with formatting the html tag are of no consequence, because you shouldn’t be trying to apply formatting to that tag anyway.

Err, why not? :?
Tyssen
February 12th, 2009 at 8:37 am
@andrin, actually, it works fine in Opera, Firefox and Safari. Can’t test that in IE because IE doesn’t support that content type.
Andrew Tetlaw
February 12th, 2009 at 9:17 am
‘Anonymous’ wasn’t me, but I can answer the question to him: Because its behaviour is inconsistent with the standard element of styling, the div. As web developers, we have more than enough inconsistencies to keep track of already, don’t we?

To follow that, I’d like to ask you why saving two divs is worth doing at all, let alone two highly-semantic and almost universally familar ones?

(I applaud the “I don’t know, so I’ll find out” approach, btw, I just think minor drawbacks cancel out minor benefits to leave you no better off markup-wise, and worse off in terms of things-to-remember)
Schmoo
February 12th, 2009 at 10:23 am
A background color on either the html or body elements will cover the whole viewport, regardless of margins.

Background properties on the body element will propagate to the html element (the viewport), but only if the latter’s computed value for the background property is transparent.

Using automatic horizontal margins to centre the body element works in IE7, but weird things happen if you then zoom the page. That’s why I generally add a <div id="ie-body"> that wraps the whole body content, and apply the styling to that. I don’t know if IE8 fixes these bugs, but I hope so.
AutisticCuckoo
February 12th, 2009 at 7:36 pm
Hmmm… I seem to remember the last time I tried applying a background-image to the html element it did not display in IE6.
Istvan
February 12th, 2009 at 10:03 pm
The w3c (14.2 background) recommend that for html pages the html element is not styled.

For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For HTML documents whose root HTML element has computed values of ‘transparent’ for ‘background-color’ and ‘none’ for ‘background-image’, user agents must instead use the computed value of those properties from that HTML element’s first BODY element child when painting backgrounds for the canvas, and must not paint a background for that BODY element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element. This does not apply to XHTML documents.

You should only attempt to style the html element in xhtml documents.
Paul O'B
February 13th, 2009 at 12:40 am
I like this approach. Thanks for sharing.
Koistya `Navin
February 13th, 2009 at 4:59 am
@AutisticCuckoo, I never tested zooming, that’s very unfortunate. I’d be a deal-breaker for me too.
Andrew Tetlaw
February 13th, 2009 at 6:22 am
@Andrew, Yes if you centre using the body then the zoom goes wide to the right in IE7 right from the start.

It acts as if the viewport is the left edge of the centred body section and zooms the rest of the page out the right side of the browser.

I’ve always avoided using the body to centre elements because I previously supported ie5.x and if you use the body to centre then it is impossible to centre the page for ie5.x because it doesn’t understand auto margins. It’s not really an issue these days but old habits die hard :)
Paul O'B
February 13th, 2009 at 8:28 am
I quite like the 90s net art of the Safari html element placing.
Andy Polaine
February 13th, 2009 at 9:18 am
nice discover. no wonder my visitor complaint my blog about layout position. some say it messy and i encourage them to used firefox
webringnet.com
February 14th, 2009 at 10:26 am
My first thought on reading this was, “An interesting exploration into the HTML and BODY elements.” But my second reaction was, “Is the HTML element semantically different, from a document POV, such that it shouldn’t be treated the same as body, or, more importantly, the DIV tag?”
Flight RisK
February 16th, 2009 at 4:48 am
Interesting. Thanks for sharing!

Do you have any information on the styling of root elements for XML documents (or “real” XHTML)? I know the W3C recommends not to style the html element, but don’t know if this is so for other markup languages.
Meitar
February 16th, 2009 at 5:06 pm
so with this technique, what happens if you want to use a background image in the body tag?

I think i like the two div technique better.
IJoeR
February 18th, 2009 at 2:52 am
@IJoeR, it works just fine. In fact you can have a background image on the html element as well (as I mentioned above). I’m not sure what problem you’re hinting at.
Andrew Tetlaw
February 18th, 2009 at 6:11 am