I apologize in advance if this has been covered here already... I've searched high and low and no one else seems to have this same problem (for reasons you will understand shortly).

Every iteration of my personal website has been set up as follows: There is a title bar at the top, a menu bar on the left, a copyright bar at the bottom, and the content fills up the remaining space. I have always achieved this through frames (so that the site takes up the entire browser window, but will scroll each area as necessary without occluding anything); however I have finally decided to move to a CSS-style layout.

My problem is this: I would like to have sections of the content area be able to scroll independantly of each other if their content exceeds their dimensions. I would also like to keep the page liquid and not have the main content area scroll. It seems that no matter what I do, the content area scrolls if I let a section in it grow too large (rather than the section itself scrolling). I have set up a rudimentary example with the CSS embedded here:


As you can see, the pinkish area expands and causes the content area to scroll, rather than staying it's normal height and scrolling itself. How can I get anything within the "contentWrapper" div to stay its own height without scrolling (or rather, how can I force contentWrapper not to scroll without clipping content?)?

Many thanks in advance to anyone who can help...