How to stick a footer to bottom in css?

Question

Hello everyone,

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,

Answer 1

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

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

Answer 2

I had a similar issue with this sticky footer tutorial. If memory serves, you need to put your form tags within your <div class=Main /> section since the form tag itself causes issues with the lineup.

Answer 3

Try making your footer position:absolute and setting the bottom: 0px.

Answer 4

This article will most probably help you achieve footer positioning:

http://www.alistapart.com/articles/footers/

Answer 5

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.