To achieve it your page structure needs to look like that
HTML
<html>
<body>
<div class="content">
<!-- all your page content goes here with header -->
<div class="stop"></div>
</div>
<div class="footer">
</div>
</body>
</html>
CSS
html{height:100%}
body{height:100%;margin:0}
.content{height:auto !important;min-height:100%}
.stop{height:40px;clear:both}
.footer{width:100%;height:40px;background-color:red;margin-top:-40px}
.stop elements will prevent footer from overlapping your content, also needs to be set to height of your footer.
.footer needs to have minus margin equals its height.
Footer will always stay on the bottom of the page
solved FOOTER div wont to be at bottom and get over another divs [closed]