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:

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


Did you enjoy this? Hire me!

Hi there, I’m Harry. I am an award-winning Consultant Front-end Architect, designer, developer, writer and speaker from the UK. I write, tweet, speak and share code about authoring and scaling CSS for big websites. You can hire me.


I am currently accepting new projects for Q3–4, 2016 Referral scheme

Projects

  • inuitcss
  • ITCSS – coming soon…
  • CSS Guidelines

Events

  • Talk & Workshop

    FrontEndNorth, Sheffield (England), September 2016

I am available for hire to consult, advise, and develop with passionate product teams across the globe.

I specialise in large, product-based projects where performance and CSS scalability and maintainability are paramount.