No space between bottom of screen and footer div

Question

I am having issues with creating a space between the bottom of the screen and the last div.

In Chrome, no problems, but with IE the border is right at the bottom of the screen.

<div id="container">
 <div id="header">...</div>
 <div id="main">...</div>
 <div id="footer">...</div>
</div>

The last div only has <br />'s

Here is the css...

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   top:30px;
   left:15px;
   width:60%;   
   border:black solid 1px;
   min-height:100%;
   position:relative;
}
#header {    
   padding:0px;
}
#body {
   background-color:FAF0E6;
   padding:10px;
   padding-bottom:25px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:10px;
   width:100%;
   height:25px;   /* Height of the footer */
}

---

Like I said, works great in Chrome, but not so much in IE.

What I would like is a space at the top and the bottom of the screen.

Edit- As an added note, I don't even see the bottom border in IE.

Thanks for the help,

-Kris

Answer 1

You can replace min-height:100% by height:100% in #container. Works in IE8.

EDIT: Is this what you are looking for?

html {
   margin:0;
   padding:0;
}
body {
   background-color:FAF0E6;
   margin-top:35px;
   margin-bottom:10px;
}
#container {
   left:15px;
   width:60%;   
   height:100%;
   position:relative;
}
#header {    
   padding:0px;
}

#footer {
   position:absolute;
   bottom:10px;
   width:100%;
   height:25px;
}

Answer 2

try adding border-bottom: solid #FFFFFF 10px; to the body style. Works for me in IE8.