CSS, making header and footer keep 100% width on browser resize

I've almost got this figured out by using previous questions, but I'm running into a small problem.

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.

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;
}

<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>

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??

Your problem's that you set padding:10px; and min-width:1100px; on your header while you define min-width:1100px; on your footer. That is causing you your white space.

Try something like this instead: http://jsfiddle.net/hrkp6/

The padding in your header is screwing you up here.

I removed it and gave it a fixed height for this demo...

http://jsfiddle.net/BA2UY/

It's because padding is added to the dimensions of the element which makes it wider than you specify.

Try with this:

#footer {
 position:absolute;
  bottom:0;
  left: 0;
  right: 0;
  height:60px;   
  background:#6cf;
  /* get rid of min-width */
}