Make Footer Stick to Bottom of Page

It is often required to keep footer stick  to the bottom of page.

Here I have given Sticky footer which always sticks to the bottom of page when your page content is not tall enough to stretch the body/container of page.

If your webpage contains enough content then it may not create problem but when content is not enough it will not appear at bottom where exactly it has to be. It just appear next to where your page gets over. This looks not good in page design.

Here with following code I have given solution for making footer stick to bottom.

---

Stylesheet Code 

*{margin:0;padding:0} /* To remove extra spacing */
html,body{
min-height:100%;
height:100% /* For Older browser height */
}
#body{
min-height:100%;
width:960px;
margin:0 auto;
font-weight:bold;
}
#content{
padding-bottom:100px;/* This vary with your footer size */
}
#footer{
width:960px;
margin-top:-100px;/* Footer height as per above padding(Negative Val) */ 
margin-left:auto;
margin-right:auto
}

---

Now Look at the HTML Code


<div id="body">
    <div id="content">
   <h1>Mukund Topiwala</h1>
    </div>
</div>
<div id="footer">
    Here is your Footer
</div>

---

Here is the sticky footer page view. How its look in your browser

tested in IE9, Mozilla firefox, Chrome 16