Make a footer stick to the bottom with CSS and some magic.

Sticky Footer Using CSS

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:


<div id="wrap">

<div id="content">

<div class="push"></div>



<div id="footer"></div>


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!