How to stick a footer to bottom in css?

Question

I am having the classic problem for the positioning of a Footer on the bottom of the browser. I've tried methods including http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ but to no good result: my footer always keeps appearing in the middle of the browser window in both FF and IE.

In the HTML i got this simple structure

<form>  ...  <div class=Main />  <div id=Footer /> </form> 

Here is the css code that is relevant for the css footer problem:

    *     {         margin: 0;     }   html, body {     height: 100%; }       #Footer     {         background-color: #004669;         font-family: Tahoma, Arial;         font-size: 0.7em;         color: White;         position: relative;         height: 4em;     }        .Main     {         position:relative;         min-height:100%;         height:auto !important;         height:100%;          /*top: 50px;*/          margin: 0 25% -4em 25%;          font-family: Verdana, Arial, Tahoma, Times New Roman;         font-size: 0.8em;         word-spacing: 1px;         line-height: 170%;         /*padding-bottom: 40px;*/     } 

Where am I doing wrong? I really have tried everything. If I missed any useful info please let me know.

Thank you for any suggestion in advance.

Regards,

---

thank you all for your answers. it worked with:

position:absolute;     width:100%;     bottom:0px; 

setting position:fixed did not work in IE for some reason(Still showed footer in the middle of the browser), only worked for FF.

Answer 1

Try setting the styles of your footer to position:absolute; and bottom:0;.

Answer 2

#Footer {   position:fixed;   bottom:0; } 

That will make the footer stay at the bottom of the browser window no matter where you scroll.