Content Spilling Over Footer Div

[yevri]

The content div goes over the footer div even though I have made the footer div clear both. I'm pretty new to CSS layout and am doing something wrong. Can you see what it is? I had tried to use the Sticky Footer method (http://ryanfait.com/sticky-footer/) and couldn't get that to work, so I removed that and maybe I messed up my code or css file, but I can't find it. Basically, I just want to have a footer div push below my content, but the content goes over my footer. I've tried several things (including overflow options) but nothing is working.

Here is the DWT (Dreamweaver template) file with the divs:
http://www.celestiacorp.com/alca/Templates/main.dwt

Or an HTML file using that template:
http://www.celestiacorp.com/alca/about_alain_locke.html

Here is the stylesheet file:
http://www.celestiacorp.com/alca/style.css

[yevri]

Just noticed that when I view it in IE 6 on windows, it is fine. It's also fine in the Dreamweaver design mode view, but when I look at the page in Safari 3.03 or Firefox Mac 2.x or Firefox Windows 2.x, the content goes over the footer.

I remember reading about an IE bug with clearing floats, but in this case it's a feature I guess.

Can you see why this would be?

[PaulVS]

Hi there,

To resolve this you must remove the height of 400px on the div#content_min.

When you set a height all browsers except IE will stick to that height (even if there is more content then those 400 pixels) and no clear will solve this. Always be carefull placing heights on block elements.

Greetings,

Paul

[yevri]

Thanks a lot, Paul. That did it. The reason I had the 400 height in the content_min div is because I wanted to make sure that no matter how much content I had in the content div, the background div would stretch to at least cover the nav area (so it's white colored background would be behind the nav).

Is there a way to make that background div stretch down to the footer no matter how much content is in the content div? Just realized, I need to put a div INSIDE the "all" div and make it clear both - I had my footer clear both, but it wasn't inside the same div as the content so that didn't push the background div down.

Thanks!

Brian

[PaulVS]

Thanks a lot, Paul. That did it. The reason I had the 400 height in the content_min div is because I wanted to make sure that no matter how much content I had in the content div, the background div would stretch to at least cover the nav area (so it's white colored background would be behind the nav).

Is there a way to make that background div stretch down to the footer no matter how much content is in the content div? Just realized, I need to put a div INSIDE the "all" div and make it clear both - I had my footer clear both, but it wasn't inside the same div as the content so that didn't push the background div down.

Thanks!

Brian

You can use "min-height" for firefox and safari to give a DIV a minimal height. IE doesnt support this but there you can use the height.

Make sure you use the height for IE only, you can do this by conditional comments explained here: http://www.quirksmode.org/css/condcom.html

Good luck :)

edit: A faster way might be this implementation of min-height:
http://www.dustindiaz.com/min-height-fast-hack/

You dont need conditional comments with this