23 January, 2011

Written by Harry Roberts on CSS Wizardry.

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

in their markup in which the page is contained. It might look something like this:

  

  
    [content]
    
  
  



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

It most situations this could be simply rewritten:

  [content]
  



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

You 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

and use the element as a wrapper.

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

---

---

---

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.

---

Suffering? Fix It Fast!

---

Connect

---

Projects

Next Appearance