Footer always at bottom of page.

To start with I will show you the code for the div then you will be able to see what the CSS does.

The basic DIV tag is just this:

<div id="footer">Footer Text here</div>

Then to show you how to add extra text in I will show you how to have some smaller text too.

<div id="footer">Footer Text<br /><span class="footersmall">This footer will stay at the bottom of the page. It is irrelevant of how much content is on the page. If there is more than a screens worth the footer will move down the page and stay at the bottom.</span></div>

Now for the CSS.

We need to create the ID for the footer and give it formatting.

#footer {
bottom: 0;
position: absolute;
background-color: #cfc;
color: #000;
width: 80%;
text-align: center;
padding: 2% 10%;
}

Now to explain the code:

bottom: 0;

This places the div at the bottom of the page. The value is the distance from the bottom. This could be a value using px, % or em. In this case we are using 0 to make it stuck to the bottom of the browser, unless you have a margin set for your body.

position: absolute;

This makes sure that the footer is at the very bottom and makes its position stick. 

background-color: #cfc;

This sets the background of the div. In this case it is a nice web friendly green. The full hex would be #ccffcc.

color: #000;

This sets the text color. In this case black.

width: 80%;

This sets the width. Now you will see in the example here that the footer takes up 100%. This is because IE needs it to say 80% as it assumes that the width excludes any padding or margins or borders. I will explain this in more detail later on.

text-align: center;

This centers the text within the div.

padding: 2% 10%;

This adds padding within the div. The first number is the Top and Bottom padding, the second number is the Left and Right padding. You can give different values to each of the top, right, bottom and left.

If you preview your page now in Firefox and IE you will notice they don't look the same. This is where we need to apply the BoxModelHack, rather than me explaining it, here is a site that explains it extremely well.

So how do we fix it in this example?

Simple, just add a bit more CSS.

#footer {
\width: 100%;
w\idth: 80%;
}

This will allow all browsers to see the width as 100% including the padding and we have a nice footer.

To do some extra formatting we will add a new class for smaller text and apply this to a span element.

.footersmall {font-size: 10px}

<span class="footersmall">This footer will stay at the bottom of the page. It is irrelevant of how much content is on the page. If there is more than a screens worth the footer will move down the page and stay at the bottom.</span>

Place this inside your div and you have a nice formatted footer.

Examples of the pages:

Footer without the BoxModelHack applied

Footer on page with no content

Footer on page with lots of content