positioning a div bottom of the page and keep content above

I have the following CSS which positions a div at the bottom of the page.

Q: How can I stop content flowing underneath it?

#footer {
    position:fixed;
开发者_StackOverflow社区    bottom:0;
    background:url(../images/bg-footer.jpg) top;
    z-index:200;
    height:34px;
    width:100%;
    line-height:34px;
    padding:0;
    font-size:11px;
    color:#fff;
}

I can't add padding to the body or anything because I have a fullscreen background image in place as per this tutorial:

http://css-tricks.com/how-to-resizeable-background-image/

try the sticky footer

Have you tried using: position:absolute; instead?

If you want to keep the content above your footer you should start by removing the positive z-index from it.

If you have the footer as the final div of the page (perhaps wrapped in a full page div) then try setting the clear property to both in your css, eg:

clear: both;

Which should prevent any other divs from falling below the footer.