Question

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

Answer 1

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/