CSS: Footer overlap in Firefox when resizing

[dinologic]

I've seen a few posts regarding this but I have yet to find a solution. I've read this ala article on footers and used the method detailed therein. My layout is slightly different. It's basically this:

<div id="container">
    <div id="page_body">
        <div id="menu">...</div>
        <div id="content">...</div>
    </div>
    <div id="footer">...</div>
</div>

css:

#container
{
position:relative;
background-color:#FFF;
margin:0 auto;
width:800px;
height:100%;
min-height:100%;
text-align:left;
}

#page_body
{
position:relative;
margin:0px 0px 70px 0px;
padding-bottom:48px;
}

#menu
{
float:left;
position:relative;
width:180px;
background-color:#EEE;
border:solid 1px #666;
margin:4px 2px 2px 4px;
font:7pt verdana;
text-align:center;
}

#content
{
margin:4px 2px 2px 188px;
padding:2px;
width:525px;
}

The problem is when you resize the browser vertically, making it smaller, the footer overlaps the other elements. It also overlaps if the elements extend down too far. All is well in IE6. The problem occurs in Firefox.

The problem can be seen here:
http://www.cfpprint.com/site_2004/edgar_services.asp

I've tried breaking it down to simple elements here:
http://www.cfpprint.com/site_2004/test.asp
and here:
http://www.cfpprint.com/site_2004/test2.asp
and I think it MIGHT have something to do with floating the menu div but I'm not sure.

Any ideas?

[mossoi]

Try removing the positioning on the footer. By setting it to bottom: 0px you are telling it to appear at the bottom of the page as it appears within the visible browser window. So if the site is 2 pages long and you've set bottom: 0px it will appear at the bottom of the first page and then scroll with the rest of the site.