Footer won't stay at the bottom of my website in Firefox only

Question

I have a website with a footer, which shows fine in Chrome and Safari.

When it is viewed in Mozilla Firefox however, the footer is not at the bottom of the page, it is all over the page, starting from under the header.

Is it something to do with using the and tags in Firefox? Or something else.

<!doctype html>
<html>
    <head>
        Stuff.....
    </head>

    <body>
        <header>
            Stuff....
        </header>

        <div id="main_container">
            <div id="content_container">
                Text (h1, h2 and p tags)
        </div>

        <div id="networking_container">
            <div id="twitter">
                Twitter Feed...
            </div>

            <div class="fb-like" id="facebook" data-href="http://www.facebook.com/EtempaSolutions" data-send="true" data-layout="button_count" data-width="225" data-show-faces="false">
            </div>

            <g:plusone size="medium" annotation="inline" width="215"></g:plusone>
        </div>

        <footer>
            <table id="favourite_links_table" cellpadding="4">
                Stuff...
            </table>

            <div id="credits">
                <p id='main_credit'>This website has been designed and hosted by <a href='http://www.etempa.co.uk'>Etempa Solutions</a></p>

                <p id='sub_credit'>Web Design, Including Coding and Images © Copyright to Pippa Rose Smith 2012. All Rights Reserved</p>
            </div>
        </footer>
    </body>
</html>

The css bits are:

html 
{ 
    padding: 30px 10px; 

    line-height: 1.4; 

    background-color: #CCC;

    -webkit-text-size-adjust: 100%; 

    -ms-text-size-adjust: 100%; 
}

html, input 
{   
    font-family: Candara, Verdana, Geneva, sans-serif; 
}

body 
{ 
    width: 860px; 

    padding: 20px 30px 20px;

    border: 1px solid #b3b3b3; 

    border-radius: 4px; 

    margin: 0 auto; 

    box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff; 

    background: #fcfcfc; 
}

footer
{
    margin-top: 30px;
}

#main_container
{
    clear: both;

    padding-top: 15px;
}

#favourite_links_table
{
    text-align: center;

    width: 850px;
} 

#credits
{
    margin-top: 30px;
}

#main_credit
{
    color: #9933FF;

    font-size: 13px;

    text-align: center;
}

#sub_credit
{
    color: #9933FF;

    font-size: 12px;

    text-align: center;
}

#content_container
{
    float: left;

    width: 70%;
}

#networking_container
{
    float: right;

    width: 25%;
}

#twitter
{
    padding-top: 30px;

    padding-bottom: 20px;
}

#facebook
{
    padding-bottom: 20px;
}

Answer 1

I've found the answer

I've added clear: both to my footer so the css is now

footer
{
    margin-top: 30px;

    clear: both;
}

Footer won't stay at the bottom of my website in Firefox only

Question

1 answers

solution1
2 ACCPTED 2012-09-21 15:26:14

Footer won't stay at the bottom of my website in Firefox only

Question

1 answers

solution1 2 ACCPTED 2012-09-21 15:26:14

solution1
2 ACCPTED 2012-09-21 15:26:14