Styling the html and body Elements

Tweet

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • andrin

    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.

  • Anonymous

    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.

  • http://www.tyssendesign.com.au Tyssen

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

  • http://www.sitepoint.com/articlelist/487/ Andrew Tetlaw

    @andrin, actually, it works fine in Opera, Firefox and Safari. Can’t test that in IE because IE doesn’t support that content type.

  • Schmoo

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

  • http://autisticcuckoo.net/ AutisticCuckoo

    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.

  • Istvan

    Hmmm… I seem to remember the last time I tried applying a background-image to the html element it did not display in IE6.

  • http://www.pmob.co.uk Paul O’B

    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.

  • Koistya `Navin

    I like this approach. Thanks for sharing.

  • http://www.sitepoint.com/articlelist/487/ Andrew Tetlaw

    @AutisticCuckoo, I never tested zooming, that’s very unfortunate. I’d be a deal-breaker for me too.

  • http://www.pmob.co.uk Paul O’B

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

  • Andy Polaine

    I quite like the 90s net art of the Safari html element placing.

  • webringnet.com

    nice discover. no wonder my visitor complaint my blog about layout position. some say it messy and i encourage them to used firefox

  • Flight RisK

    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?”

  • http://www.sitepoint.com/articlelist/537/ Meitar

    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.

  • http://www.ijwebsites.com/ IJoeR

    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.

  • http://www.sitepoint.com/articlelist/487/ Andrew Tetlaw

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

  • http://www.ipsum-generator.com/ primozc

    Here I found a very nice online resource for fast creating the CSS style sheets: link. Check it out, it’s really easy …