I'm struggling to make my 2-column layout display properly with a footer that sticks to the bottom of the page. Despite following all the usual advice, my columns keep expanding beyond their container div, which causes the footer to get pushed off the bottom of the page.
My latest attempt was to treat the columns container as a table!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html, body{
margin:0;
height: 100%;
padding: 0;
border: 0;
overflow:inherit; /* triggers 100% height in Opera 9.5 */
font-family: proxima-nova, 'Proxima Nova', gotham, 'helvetica neue', helvetica, arial, sans-serif, sans;
}
body{
background-color: burlywood;
}
#wrapper
{
background-color: #FFFFFF;
min-height:100%;
width: 980px;
margin:0 auto;
margin-top: -105px;
}
* html #wrapper {
height:100%;
}
div.margin{
width: 920px;
margin-right:auto;
margin-left:auto;
padding: 0px 30px 0px 30px;
}
div.header{
height: 60px;
background-color:cornflowerblue;
}
div.footer{
position: relative;
clear:both;
height: 105px;
background-color:#4E8084;
}
div.body_content{
display: table;
background-color: red;
height: 100%;
}
div.leftSide{
width:25%;
background-color: #F4F4F4;
display: table-cell;
}
div.rightSide{
width: 70%;
padding: 20px;
background-color: #e8e7e7;
display: table-cell;
}
</style>
</head>
<body>
<div id="wrapper">
<div style="height: 105px;"></div>
<div class="header margin">
Welcome
</div>
<div class="body_content" style="clear: both;">
<div class="leftSide">
<h2>Settings</h2>
<a href="#" id="personalButton" class="current">Personal</a>
<a href="#" id="securityButton">Security</a>
</div>
<div class="rightSide">
<h3>Title</h3>
<a class="m-btn blue-stripe">Save Changes</a>
</div>
</div>
</div><!-- end #wrapper -->
<div class="footer margin" >
<span class="footer_links">
something
</span>
</div>
</body>
</html>