HTML scrolling div layout problem

Question

I'm trying to design a HTML page with the following requirements:

• a fixed header (headerBox) and footer (footerBox) element (should not scroll)
• the content area contains a top (width 100%, contentBoxMap) element that can be expanned over the whole content area
• a left (contentBoxLeft) and right (contentBoxRight) content element beneath the top content element (contentBoxMap)
• the right content element (contentBoxRight) should expand to the bottom and scroll if there is overflow.

I've come up with a solution [jsbin] that almost works. The problem there is some overflow in the right content element which flows beneath the footer. See the following picture as an example: alt text http://img541.imageshack.us/img541/897/screenshot150206.png

Question:

1. Can anyone tell me how to fix the overflow problem in contentBoxRight? I'm also glad if you could tell me what's the problem with my current solution.

2. Is this even a good approach to do it, considering browser compatibility? Finally, it should look the same on IE 7+, FF 3+, Safari 3+. IE6 and Opera should look ok, but it doesn't matter if it differs abit.

Thanks for any hints.

Answer 1

You can delete the property height:100%; in #contentBoxRight and then fix the blue background of #contentBox.