I have been experimenting with different ways to keep my footer at the bottom of the page. Initially, I tried using position: static, but the footer ended up above the bottom of the page and the background was visible (similar to the image below).
Then, I attempted an absolute footer. While this method did place the footer at the bottom of pages without enough content to scroll, on longer pages it would load at the bottom of the window and overlap with content instead of staying at the bottom of the page.
Below is the code I am currently using:
<div id="container">
<div id="content">
<div id="slideshow"></div>
<div id="clear"></div>
<div id="boxes">
<div id="box">
<div id="boxheader"></div>
<div id="box1" class="box"></div>
</div>
<div id="box">
<div id="boxheader"></div>
<div id="box2" class="box"></div>
</div>
<div id="box">
<div id="boxheader"></div>
<div id="box3" class="box"></div>
</div>
</div>
<div id="clear"></div>
</div>
</div>
<div id="footer">Content</div>
Here is the corresponding CSS:
div#container{
position:relative;
margin: 4px;
}
#boxes{
width: 960px;
margin: 50px auto 0px auto;
}
#footer {
clear: both;
margin-top: 50px;
bottom: 0;
left: 0;
height: 200px;
background-color: #fff;
width: 100%;
}
If you require any further information, feel free to reach out to me.