positioning a div bottom of the page and keep content above

Question

I have the following CSS which positions a div at the bottom of the page but how can i stop content flowing underneath it.

#footer { position:fixed; 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 cant 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/

Any help would be appreciated.

Answer 1

Have you tried using: position:absolute; instead?

Answer 2

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

Answer 3

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:

css: both;

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

Answer 4

try the sticky footer