Footer problem with CSS

I'm trying to get my site entirely CSS-driven, but I'm having problems with a footer section that won't stay at the foot of page.

For example:

platinax.co.uk/news/2005/09/27/intel-and-microsoft-to-support-hd-dvd/

Current footer CSS values:

.footer { 

background: url(../images/bg_footer.gif) left repeat-x; 
height: 118px; 
width: 100%; 
text-align: center; 
padding-top: 22px; 
}

Code (markup):

Any suggestions on how to get the footer behaving much appreciated - a working code replacement gets $20 via Paypal.

 

From experts exchange. I'll paste here so you don't have to sign up to see it. the question was:

And the answer Hope it helps.

 

I think you have used very much absolute-positioning in the layout. For that kind of layout, floats will better fit IMO. Please check the following pages. You will probably need to change your DIVs hierarchy a little (for ex. taking the footer div to one upper level, etc.)

http://www.stopdesign.com/log/2005/07/27/still-throwing-tables.html
http://stopdesign.com/present/2004/ddw-seattle/tables/

Check html and css source for floats:
http://stopdesign.com/examples/ms/

Hope this helps.

 

I've tried playing with floats instead of absolutes, and also changing the div order - I just can't get the page to behave properly.

 

Just took a quick peek at it. Looks like you have a closing div right after your footer...what div is the footer enclosed in? Seems like the way you have things set up you want your footer div below any other divs as you are not using a container div that I could see.

BTW, there are some drop in three column css layouts like this one that should take care of all of your problems. Looks like you can drop in all of your stuff into that one including your menus.

 

I belive you need to use the clear command in order for it to stay at the bottom.

 

Thanks for the advice, folks - looks like overall the problem is due to absolute values for position for the left, center, and right content, and that this won't allow the footer to be controlled, even with clear commands.

I think I'll probably need a new CSS template...

 

I think the example tutorial that chachi posted should do the job