Mar 14 2005

Point/Counterpoint: The Wrapper Div

Point: The wrapper div (a generic div element placed just inside the body, encasing all other elements) can be an effective way of producing a sub-body element of which you can have full control.

Counterpoint: The wrapper div has no semantic meaning whatsoever.

Point

The wrapper div (a generic div element placed just inside the body, encasing all other elements) can be an effective way of producing a sub-body element of which you can have full control. It allows you to cut down the size of your CSS file size by creating an additional parent element to specify characteristics such as width, font-size, background-color, etc.

Sure, the wrapper div itself may not have much semantic meaning, but its benefits far outweigh that drawback. I can save the user a few K of bandwidth, while making my own development process a little easier. CSS bugs and browser differences already make us include certain non-semantic elements or hacks in our XHTML and CSS that we wouldn’t need if things were implemented properly. The wrapper div is a minimalist approach to dealing with such differences, and it does so gracefully and easily.

Counterpoint

The wrapper div has no semantic meaning whatsoever. So you need an element that wraps around all your content for styling purposes? That’s what the body and html elements are for! Sure, they may be buggy in some browsers, but creating non-semantic elements to make up for these bugs is just plain laziness.

I could argue that if you needed this additional element that:

<table>
    <tr>
      <td>CONTENT</td>
    </tr>
  </table>

Takes up just a little more bandwidth than

<div id="wrapper">CONTENT</div>