Place background image at the true bottom of the page?

[404error]

Firefox does not recognize the true page bottom when created by a floating div...


Ok so the objective is to have a background image at the very bottom of the page (not the window) so if content extends past the viewable window, you will have to scroll down to the bottom of the page before the background image is visible.

http://i223.photobucket.com/albums/dd286/freefileinc/ie_bg_btm-1.gif

Here is the code I'm using:
<style type="text/css">
html {min-height: 100%;height:auto;}
body {background-image:url(bg.jpg); background-repeat:repeat-x; background-position:bottom;}
#floater {position:absolute;width:300px;z-index:1;}
</style>

Now everything works perfectly across the board, unless floating divs are involved. If the content in the div extends past the viewable window, while IE still seems to work fine, firefox does not recognize the bottom of the div, and only seems to be looking at actual content on the page. since there is no content on the page that extends past the viewable window, it places the background image at the bottom of the window, and not the bottom of the page.

http://i223.photobucket.com/albums/dd286/freefileinc/ff_bg_btm.gif

[Mindzai]

Do you have an element clearing the float at the bottom of the page? To test try adding the following right before the </body> tag:

<div style="clear: both"></div>