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

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;
}

Answers


I've found the answer

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

footer
{
    margin-top: 30px;

    clear: both;
}

Need Your Help

trying to reload table but giving exception 'NSInvalidArgumentException'

iphone uitableview reload nsexception

I am having a tableview which i created using iboutlet.and when i am trying to reload table it is giving this exception.

NSManagedObject ignores return value of automaticallyNotifiesObserversForKey: ands KVO notifications

objective-c cocoa core-data nsmanagedobject key-value-observing

I noticed that changing a managed property in a subclass of NSManagedObject sends KVO notifications, even if I overwrite the automaticallyNotifiesObserversForKey: to return NO.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.