How to position a footer/element relative to the bottom of the page?

Question

I'm trying to position my footer in the bottom of the page but with little success.

I can only paste the link as there is a lot of CSS in there and I'm not sure where is my problem.

So this is the link: Test ; If someone would like to help me out I would appreciate it.

EDIT: The question is old and the url is not there anymore, but the answer may be considered valid anyway when an individual needs to position a footer (or any other element) to the bottom of the page (so called sticky footer).

Answer 1

I have actually used this solution lately. It works very well. And if you have dynamic content inside the footer you can easily make a script which on resize or orientation change changes the height of the footer and the margin on the body.

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 100px;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px; //same height as the margin to the bottom of the body
}