[SOLVED] How to stick a footer to bottom in css?

How to stick a footer to bottom in css?

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.

Solution

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