Sticking my footer to the bottom of the page

Question

My footer doesn't want to stick to the bottom of the page. I'm new to HTML and I cant get it to go down.

Here's my code:

<div class="footer">
    Copyright &copy; 2013. All rights reserved
</div>

Answer 1

Simple Fixed Solution:

.footer {
   position: fixed; 
   bottom: 0;
}

Simple Absolute Solution:

.footer {
   position: absolute; 
   bottom: 0;
}

Fancier Sticky Footer:

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
.footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: red;
}

Answer 2

There are several questions on Stack Overflow like this, one such question is the following:

How to align footer (div) to the bottom of the page?

... and I've given an answer to that question.

If you don't feel like navigating to the answer, here's two quick links:

• http://www.cssstickyfooter.com/
• http://ryanfait.com/sticky-footer/