Bloody footer being a pain!

[enormousrodent]

http://www.invisiblewebdesign.co.uk/temp/tst/

Can someone please let me know why my footer is jumping up in firefox... I cannot think why it should be doing it..

Thank you

css -

*
{
        margin:0;
        padding:0;
}

body
{
        font:8pt arial, verdana, sans-serif;
        color:#a1a1a1;
        text-align: left;
        background:#e5e1c8;
        background-image: url('../images/background.jpg');
        background-position: top center;
        background-repeat: no-repeat;
}

h1
{
        font:13pt verdana, arial, sans-serif;
        font-weight:700;
        color:#003c81;
        text-align:left;
        padding-left:5px;
        padding-bottom:5px;
}

h2
{
        font:10pt arial, sans-serif;
        color:#036;
        font-weight:700;
        text-align:left;
        padding-left:5px;
}

h3
{
        font:8pt verdana, arial, sans-serif;
        color:#036;
        text-align:left;
        padding-left:5px;
}

#outercontainer
{
        width:882px;
        background:#fff;
        margin:0 auto;
        background-image: url('../images/outerbackground.gif');

}
#innercontainer
{
        width:770px;
        background:#fff;
        margin:0 auto;
}
#content
{
        width:770px;
        background:#fff;
        margin:0 auto;
}
#header
{
        height:150px;
        width:770px;

}

#navigation
{
        height:31px;
        width:770px;
        text-align:left;
        background-image: url('../images/navback.jpg');
        color:#a1a1a1;
        padding-top: 10px;
}

#navigation ul
{
        list-style: none;
        padding: 0;
        margin: 0;
}

#navigation li
{
        float: left;
        margin: 0 0.15em;
}

#navigation a
{
        font:8pt arial, verdana, sans-serif;
        font-weight: bold;
        color:#a1a1a1;
        text-decoration: none;
}

#headerbar
{
        height:40px;
        width:770px;
        text-align:left;
}

#leftcolumn
{
        width:210px;
        background-color: #fafafa;
        float:left;
        padding: 15px 20px 0px 20px;
}


#centercolumn
{
        width:320px;
        text-align: justify;
        padding: 15px 20px 0px 20px;
        float:left;
}

#rightnav
{
        width:120px;
        background-color: #fafafa;
        padding: 15px 20px 0px 20px;
        float:left;
}

.orangetitle
{
        font:8pt arial, verdana, sans-serif;
        color:#f89b1c;
        text-align: left;
        font-weight: bold;
}

#footer
{
        height:32px;
        width:882px;
        background-image: url('../images/footer.gif');
        margin:0 auto;
} 

[DaveWoods]

You have a footer style in your CSS but no part in your HTML relates to that with an id="footer"

However, if you're talking about the content no expanding to contain it's children then the problem is that a parent element will not stretch to contain it's floated children

There are two solutions that I'd use. Either float the parent (and it's parent) or apply overflow: hidden; to the element which has the floated children

For this I'd probably use the overflow method as it'll be a little simpler.

#content
{
        width:770px;
        background:#fff;
        overflow: hidden;
}

Also you can remove the margin: 0 auto; from this style as the parent will handle that.

You'll probably also need to supply a conditional comment for IE6 so that you can give it a height: 1%;

Hope that helps.

[enormousrodent]

Thats so strange? Why does it do this? I understand the floating method, but how does overflow hidden fix the solution?

Thanks for helping btw

NOTE: had to leave margin property as safari would not render it properly...there an alternate solution or would you say just leave it

[DaveWoods]

Not sure why it works but this blog post explains it's origins I think

http://www.sitepoint.com/blogs/2005/...ing-of-floats/

As for the Safari problem, I'm not sure which version your running but Mark seemed to find that the same solution for IE5.x solved this issue for Safari as well so try text-align: center; on the body and then reapply text-align: left; on the container that follows it to ensure that all text on the page isn't centered.

If that doesn't work then I'd probably leave it as it is, although if it was me there'd be a nagging at the back of my head to get to the reason behind something behaving oddly.