Should we be setting width on div#wrapper or the ?

Question

A lot of people's HTML markup looks like this:

<html>
  <body>
    <div id="wrapper">
      <p>Stuff in here</p>
    </div>
  </body>
</html>

And most of the time in examples here, or on the web, people suggest that you should apply width settings to the #wrapper, instead of the <body>.

Is there an underlying reason for that?

For example, in an article on techniques for gracefully degrading media queries, and to give you some context on Technique 1: Do Nothing:

The elephant in the room is Internet Explorer for the desktop. With a mobile-first solution, large screens will display the content in one column, resulting in a painful reading experience for the user, way past the established maximum for comfort: 50 to 75 characters. It might be worth setting a max-width property in your main container and then upping that max-width in a media query.

And their CSS:

#wrapper {
 _width: 460px; /* Take that, IE6! */
 max-width: 460px;
}

@media only screen and (width) {

#wrapper {
  max-width: 1200px;
 } 
}

Here's how it'd come together for IE (media query is commented out).

Would there be any difference whereby instead of applying that to #wrapper, we would apply it to <body> — with the standard website in mind?

Any potential bugs? I tried it here, and it seems to be OK. Just what if the layout gets more advanced...

sheriffderek · Accepted Answer

Well, you want to use as few elements as possible I guess. However there are many instances where #page-wrapper and body are not interchangeable. In many situations you need to use the body as the background color instead of the html tag. In these cases (weighted footers for example) you need the body to stretch out the html and you need a wrapper to contain the content, maybe center the content, and force the body to stretch out and contain it.

So - I guess I would say, that most people use a wrapper because they saw it in their first class or online tutorial. I think that for the most part, it is a habit for many. I would leave the body as is and margin the wrapper to 0 auto and use a max width like you have. It's just EI 8 and before - can I use media queries ? - maybe you should detect EI 8 and make a unique style sheet. I find that after defining everything for mobil, my media queries are only a few lines of iteration after that -

Should we be setting width on div#wrapper or the <body>?

Tags:

html

css

semantic-markup

media-queries

Baumr

1 Answers

sheriffderek

Recent Activity

Donate For Us