title: Should we be setting width on div#wrapper or the <body>?
body: <p>A lot of people's HTML markup looks like this:</p>
  
  <pre><code>&lt;html&gt;
    &lt;body&gt;
      &lt;div id="wrapper"&gt;
        &lt;p&gt;Stuff in here&lt;/p&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And most of the time in examples here, or on the web, people suggest that you should apply width settings to the <code>#wrapper</code>, instead of the <code>&lt;body&gt;</code>.</p>
  
  <p>Is there an underlying reason for that?</p>
  
  <p>For example, in an article on <a href="http://coding.smashingmagazine.com/2011/08/10/techniques-for-gracefully-degrading-media-queries/" rel="nofollow noreferrer">techniques for gracefully degrading media queries</a>, and to give you some context on <strong>Technique 1: Do Nothing</strong>:</p>
  
  <blockquote>
    <p>The elephant in the room is <strong>Internet Explorer</strong> 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.
    <strong>It might be worth setting a max-width property in your main container and then upping that max-width in a media query.</strong></p>
  </blockquote>
  
  <p>And their CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>#wrapper {
   _width: 460px; /* Take that, IE6! */
   max-width: 460px;
  }
  
  @media only screen and (width) {
  
  #wrapper {
    max-width: 1200px;
   } 
  }
  </code></pre>
  
  <p>Here's <a href="http://jsfiddle.net/Baumr/9Atn6/" rel="nofollow noreferrer">how it'd come together for IE</a> (media query is commented out).</p>
  
  <p>Would there be any difference whereby instead of applying that to <code>#wrapper</code>, we would apply it to <code>&lt;body&gt;</code> — with the standard website in mind?</p>
  
  <p>Any potential bugs? <a href="http://jsfiddle.net/Baumr/9Atn6/1/" rel="nofollow noreferrer">I tried it here</a>, and it seems to be OK. Just what if the layout gets more advanced...</p>