Hi,

I need to get a footer to stick to the bottom of the page, but so that it doesn't overlay.

 

This website is the one I'm talking about.

 

The DIV `Bottom` needs to sit below at the bottom of the page, below the existing content. But it has to stick at the bottom of the page, and not overlay the content above it.

 

Trying using

Position: fixed; 
Bottom: 0px;

 

This sticks it at the bottom of the page, but it overlays any content that is there.

 

Cheers.

Basically..

 

I want the footer to stay at the bottom of the page. If there is content/text ect.. then it goes underneath that.

But if there is not, then it goes right at the bottom of the page.

 

If you zoom out / view it on a larger screen, then it'll stick to the base of the page.

 

I'm sure it's possible, but its a right pain at the moment. Not really got my WebDev hat on at the moment.

 

Would greatly appreciate any help with this.

There are two types of sticky footer, the position: fixed type which you don't want and this type:-

http://ryanfait.com/sticky-footer/

and

http://www.cssstickyfooter.com/

which only sticks to the bottom if there isn't enough content to fill the page height, if there is enough, it stays below the content.

 

Both work the same way although the code may be slightly different.

Cheers. Just came accross the http://www.cssstickyfooter.com/ one via google. Now working like a charm .

 

Thanks for the advice.