How to push the footer to the bottom of the screen?

Question

Possible Duplicates:
How to align footer (div) to the bottom of the page?
http://www.google.com/#q=bottom+footer+site:stackoverflow.com

How to push the footer to the bottom of the page ?

I tried many ways but nothing works :)

My Html

<div id="header">
.
.
</div>

<div id="container">
.
.
</div>

<div id="footer">
    <div id="footerContent">
.
.
    </div>
</div>

You need a sticky footer 1 - http://ryanfait.com/sticky-footer/ 2 - http://www.cssstickyfooter.com/using-sticky-footer-code.html 3 - http://css-tricks.com/14-sticky-footer/ - I myself use 2 — Jawad, Jul 12 '11 at 18:40

score 2 · Answer 1 · answered Jul 12 '11 at 18:06

2

I found the method linked below to be the most effective for my personal needs:

answered Jul 12 '11 at 18:06

ssell

score 0 · Answer 2 · answered Jul 12 '11 at 18:04

0

position: absolute;
bottom: 0px;

answered Jul 12 '11 at 18:04

Håvard

I tried this way. It didn't work :) – faressoft Jul 12 '11 at 18:25
@faressoft: Why this does not work? This is the most "quick" solution. However it has it's own problems, like when the content increases, it will overlap the footer. Give your html, body a height of 100%, give the
a position of absolute with bottom: 0px;
– Jawad Jul 12 '11 at 18:47

2 Answers2