Footer sticking to the bottom issue - html

Question

I've tried ways to make this work. Mainly been trying this solution.
That didn't work out for me. The issue I do see is that in my body html css, I do have the height set up 100%, but its not really setting it to 100%.
Here is my css code for my footer and body, html:
body {
font-family: 'AG-Regular', Helvetica, Arial, sans-serif;
margin: 0;
min-width: 1058px;
}
body, html {
height:100% !important;
}
#footerBox {
width: 100%;
height:218px;
background-image:url(/img/footer-bg.png);
background-attachment:scroll;
background-repeat:repeat-x;
}
Here is a link to the site.
You should see where it's messed up at. Any help would be appreciative. Thanks.

Answer 1

To get the header and footer to stick you need to use position: fixed on both.
Example Code
Header
#headerBox
{
position: fixed;
height: 200px;
left: 0;
top: 0;
width: 100%;
}
Main
#mainBox
{
overflow: auto;
}
Footer
#footerBox
{
postion: fixed;
height: 218px;
width: 100%;
bottom: 0;
left: 0;
}

Answer 2

Main problem was the -218px margin-bottom in #maincontent. Make this 218px so that your footer is pushed down. I set your footer to always be on the bottom of the page using position: fixed, not sure if this is what you wanted or not.
#footerBox {
width: 100%;
height: 218px;
background-image: url(/img/footer-bg.png);
background-attachment: scroll;
background-repeat: repeat-x;
position: fixed;
bottom: 0;
}
#mainBox #mainContent {
background-color: white;
margin: 185px auto 218px;
overflow: auto;
padding: 30px 20px 20px;
width: 958px;
}