title: CSS, making header and footer keep 100% width on browser resize
body: <p>I've almost got this figured out by using previous questions, but I'm running into a small problem.</p>
  
  <p>I need my header and footer to span 100% of the page when I resize the browser, and I've solved this for the most part by using min-width on the header and footer. The header is behaving very well, but the footer has a little white space on the right at all times. Help?
  NOTE: The white space only occurs on browser resize (getting smaller), and it is equally spaced at all times. </p>
  
  <pre><code>html,
  body {
   margin:0;
   padding:0;
   height:100%;
  }
  #container {
     min-height:100%;
     position:relative;
  }
  #header {
     background:#ff0;
     padding:10px;
     min-width:1100px;
     }
  #body {
    padding:10px;
    padding-bottom:60px;   /* Height of the footer */
   }
  #footer {
   position:absolute;
    bottom:0;
    width:100%;
    height:60px;   /* Height of the footer */
    background:#6cf;
     min-width:1100px;
  }
  
  &lt;div id="container"&gt;
  &lt;div id="header"&gt;&lt;/div&gt;
  &lt;div id="body"&gt;&lt;/div&gt;
  &lt;div id="footer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>EDIT: I've changed min-width in the footer to be 1120px as a bandaid solution, and it's working for the moment. Why is this working??</p>