There is no space between the bottom of the screen and the footer

Question

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

Chrome has no problems, but with IE, the border is 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 has only <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 */
}

---

As I said, it works fine in Chrome, but not in IE.

I would like the space to be above and below the screen.

Change 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% in height: 100% in #container. It works in IE8.

EDIT: Is that 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

border-bottom: solid #FFFFFF 10px; . IE8.