Question

I have fixed footer DIV and content DIV. Footer DIV is fixed so it is visible all time. Content DIV is 100% height, but it touches footer DIV and crosses it to the end. I want it just to end when footer begins.

<div id="footer">
</div>

<div id="content">
</div>

Here is a jsFiddle link: http://jsfiddle.net/MXMWe/3/

Problem: Content DIV (with its text) goes over footer.

Note 1: Footer has to be visible all time no matter where you scroll (possibly fixed.

Note 2: Scrollbars have to be normal as it is when you first load browser. No changes there.

Here is an image telling what I want to achieve:

I will give more info if asked.

Thanks a lot.

Answer 1

I updated the jsfiddle:

http://jsfiddle.net/MXMWe/4/

A few things:

1. I added a <div id="footer-padding></div> before the closing div in #content. Then in the css added height:120px; (the same height as the #footer ) – This allows the content text to not be stuck at the bottom of the site, but instead the very top of the footer.
2. I removed the opacity that was on the footer because if you have the opacity it effects the entire div – AKA the text from the content div would be visible behind it since it’s transparent.
3. I added a z-index: 2 to the #footer to ensure it is above the #content at all times.

If you’re going to have an opacity/transparency as the background of the footer you will see anything it’s above, behind it.