title: Banner 100% width extends to window size, but not document size
body: <p>We have a iamge banner on our web page that is a gradient that is repeated on the x-axis. The problem is, if our content on our web page (which is dynamically created based on data in our database) spans a width greater than the window width, then our banner no longer spans the entire width of the document when scrolled. Anyone know how to fix this?</p>
  
  <p>A simple example is posted below. The blue is our "banner" the "red" is our content.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
  
          *{
              padding:0;
              margin:0 auto;
          }
  
          #header{
              height:80px;
              background-color:blue;
              width:100%;
          }
  
          #content{
              width:1500px;
              background-color:red;
          }
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;div id="header"&gt;&lt;/div&gt;
  &lt;div id="content"&gt;&lt;h1&gt;TEST&lt;/h1&gt;&lt;/div&gt;
  
  &lt;/html&gt;
  </code></pre>