Every time I attempt to include columns on my webpage, my footer becomes unstuck and the content spills into the footer area. However, everything works perfectly fine when I directly add content to the holding content div.
Sample HTML code:
<div id="wrapper">
<div id="content">
<div class="left_content">
</div>
<div class="right_content">
</div>
</div>
<div id="footer"></div>
</div>
CSS Snippet:
html,
body {
margin:0;
padding:0;
height:100%;
font-family: arial, sans-serif;
}
#wrapper {
min-height:100%;
position:relative;
}
#content {
padding-bottom:96px; /* Height of the footer element */
width: 960px;
margin-left: auto;
margin-right: auto;
}
#footer {
background:#162b83;
width:960px;
height:96px;
position:absolute;
bottom:0;
left:50%;
margin-left: -480px;
}
div.left_content {
width: 500px;
margin-right: 60px;
float: left;
}
div.right_content {
width: 400px;
float: left;
}