23 January, 2011

Using the <body> element as a wrapper

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…

Table of Contents

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:

<code><span class="code-comment"><!-- Markup --></span>
<body>

  <mark><div id="wrapper"></mark>
  
    [content]
    
  </div>
  
</body>

<span class="code-comment">/* CSS */</span>
body{
  font-family:sans-serif;
  background:#fff;
  color:#333;
}
<mark>#wrapper{</mark>
  width:940px;
  margin:0 auto;
}</code>

It most situations this could be simply rewritten:

<code><span class="code-comment"><!-- Markup --></span>
<body>

  [content]
  
</body>

<span class="code-comment">/* CSS */</span>
body{
  font-family:sans-serif;
  background:#fff;
  color:#333;
  width:940px;
  margin:0 auto;
}</code>

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.

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…

Hire me

By Harry Roberts

Harry Roberts is an independent consultant web performance engineer. He helps companies of all shapes and sizes find and fix site speed issues.

Hi there, I’m Harry Roberts. I am an award-winning Consultant Web Performance Engineer, designer, developer, writer, and speaker from the UK. I write, Tweet, speak, and share code about measuring and improving site-speed. You should hire me.