Make your footer stick to the bottom

Often you will want the footer of a website to stick to the bottom of the page, as it looks a little silly in a large screen when the footer is half way up.

This can be achieved with setting a few css styles.

The CSS:

<style type="text/css">

* {
margin: 0;
}

html, body {
height: 100%;
}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
background:#0F0;
}

.inner-wrapper {
padding-bottom:50px;
}

.push {
clear:both;
}

.footer {
background:#F00;
height: 50px;
}

</style>

The HTML code:

<div class="wrapper">

  <div class="inner-wrapper">

    content

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

  </div>

</div>

<div class="footer">

  footer

</div>