title: Using CSS, how can I style a div tag to full the <body> width, even when the viewport is scaled?
body: <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;style&gt;
          html {
              margin: 0;
              padding: 0;
              border: 0;
          }
  
          body, div, span, applet, object, embed, iframe, pre, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address, big, cite, code, del, dfn, b, strong, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, table, tbody, dl, dt, dd, ol, ul, li, fieldset, form, button, label, legend, caption, hr, noscript {
              margin: 0;
              padding: 0;
              border: 0;
              outline: none;
              list-style: none;
              font-weight: normal;
              font-style: normal;
              font-size: 100%;
              font-family: inherit;
              vertical-align: top;
              text-decoration: none;
              position: relative;
          }
  
          body, html {
              height: 100%;
              border: none;
              top: 0;
              font: 12px/1.3 Helvetica, Arial, sans-serif;
              color: #131318;
              background: #E7E7E7;
              text-align: left;
          }
  
          .full {
              width: 100%;
              float: left;
          }
  
          .top {
              padding: 20px 0;
              background: #FF0000;
          }
  
          .center {
              width: 900px;
              margin: 0 auto;
          }
  
          .shell {
              width: 860px;
              padding: 20px;
              float: left;
              background: #FFF;
          }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="full top"&gt;logo&lt;/div&gt;
          &lt;div class="full"&gt;
              &lt;div class="center"&gt;
                  &lt;div class="shell"&gt;
                      &lt;p&gt;Lorem&lt;/p&gt;
                      &lt;p&gt;Lorem&lt;/p&gt;
                      &lt;p&gt;Lorem&lt;/p&gt;
                      &lt;p&gt;Lorem&lt;/p&gt;
                      &lt;p&gt;Lorem&lt;/p&gt;
                      &lt;p&gt;Lorem&lt;/p&gt;
                      &lt;p&gt;Lorem&lt;/p&gt;
                      &lt;p&gt;Lorem&lt;/p&gt;
                      &lt;p&gt;Lorem&lt;/p&gt;
                      &lt;p&gt;Lorem&lt;/p&gt;
                  &lt;/div&gt;&lt;!--/.shell--&gt;
              &lt;/div&gt;&lt;!--/.center--&gt;
          &lt;/div&gt;&lt;!--/.full--&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>You can see in <a href="http://cl.ly/image/421z26151n1O" rel="nofollow">here</a> (or by visiting <a href="http://jsbin.com/aqeqaj" rel="nofollow">here</a> and shrinking your browser down until there is a horizontal scroll bar, then scrolling to the right) that the top red bar is always the size of the viewport, rather than filling up the entire width of the page. How can I fix this? How can I make a bar like this (my header with menu, etc.) truly fill the width of the page, regardless of view-port resizing (preferably without JavaScript)?</p>