Need some CSS help with a footer

[GoingUp]

I'm trying to force a footer to the bottom of the page. Its the slim brown footer at the bottom.

The effect is evident at 1600x1200 because I dont have enough content to get the footer on the bottom naturally. How can I force it to the bottom on a big screen like 1600x1200?

http://www.cheddarcheesemedia.com/mikeandandrea/

I don't know if CSS can do this.....


If there is only a couple of lines of text, the footer appears at the bottom of the window and then the columns extend to the bottom of the page.

If there is more text than can fit on one page, then the footer goes after all of the content, but you have to scroll down to see it.

Anyone know if this is possible? All of the tutorials I find are like 3 years old and I can't get to work.

Thanks!


Edit: Thanks for the feedback so far! I can get it to work in IE7 and Firefox, but not IE6. Well after a bunch of playing around with the CSS file, I still can't get it to work in IE6. It appears that my problem is that I define the width for the container DIV in the CSS file. When I remove it, the footer goes to the bottom of the page, but it also screws everything else up.

Edit2: You will need a screen res higher than 1024x768 to see what I'm talking about.

 

[LanceM]

All (or at least a lot) that you need to know about footers (including what you're asking): http://alistapart.com/articles/footers

 

[jjones]

What you could do is give the footer div absolute position at the bottom of the page and then give the columns above it a bottom margin equaling the footer height so they don't overlap. that should work, I think.

Well, the only problem with that is it won't bring your colums down the full length of the page with your footer, but since you have everything vertical, you could just make those colum backgrounds the body background image.

 

[GoingUp]

Originally posted by: jjones
What you could do is give the footer div absolute position at the bottom of the page and then give the columns above it a bottom margin equaling the footer height so they don't overlap. that should work, I think.

Well, the only problem with that is it won't bring your colums down the full length of the page with your footer, but since you have everything vertical, you could just make those colum backgrounds the body background image.

It is the body background image right now. Lemme take a look at what Lance posted....

 

[GoingUp]

Originally posted by: LanceM
All (or at least a lot) that you need to know about footers (including what you're asking): http://alistapart.com/articles/footers

Thank you! Thats exactly what I was looking for!

 

[GoingUp]

Originally posted by: Gobadgrs

Originally posted by: LanceM
All (or at least a lot) that you need to know about footers (including what you're asking): http://alistapart.com/articles/footers

Thank you! Thats exactly what I was looking for!

damn... works in everything but IE6

 

[Drakkon]

http://ryanfait.com/sticky-footer/ -not sure if thats what your looking for but its just another solution

 

[GoingUp]

Well after a bunch of playing around with the CSS file, I still can't get it to work in IE6. It appears that my problem is that I define the width for the container DIV in the CSS file. When I remove it, the footer goes to the bottom of the page, but it also screws everything else up.

 

[GoingUp]

bump