Make a footer stick to the bottom with CSS and some magic.
This solution gives you a sticky footer without any absolute positioning. It’s quite easy to do too.
Firstly, in your html or php file, you should have a #wrap to hold everything, apart from the #footer. In the #wrap, there should be a #content to hold all your main content. Before the close of the #content div, create an empty div an give it a class of “push”. After #wrap, create #footer to hold all your footer content. Here is an example of how to make your footer sticky, here is what you should have so far:
<html>
<head>
<title></title>
</head>
<body>
<div id="wrap">
<div id="content">
<div class="push"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
Now, the CSS should be as follows:
html, body { height: 100%; } #wrap { height: 100%; height: auto !important; min-height: 100%; /*This bottom margin should be minus, and also the height size of your footer)*/ margin: 0px auto -65px; } .push { /*Again, this should be the height size of the footer*/ height: 65px; } #footer { height: 65px; } This will give you a great sticky footer. Easy when you know how!