using overflow with an absolutely positioned nested div

[Dman100]

I am working on a layout and the basic structure has 4 divs all floated left, which breaks the layout into 4 quadrants (top left, top right, bottom left and bottom right). The top left quadrant has a 35% width and 65% height. The top right quadrant has a 65% width and 65% height. The bottom left quadrant has a 35% width and 35% height and the bottom right quadrant has a 65% width and 35% height.

The content in the top left and top right quadrants have nested divs that are absolutely positioned and set to bottom:0; inside the relatively positioned parent div, so it sits flush at the bottom of the parent div.

Here is the basic structure of the nested divs:

#TRcontent {position:relative;height:65%;width:65%;overflow:auto;}
#TRcontent div {position:absolute;bottom:0;}

<div id="TRcontent">
 <div>
 <!--content goes here-->
 </div>
</div>

I tested this in IE6, IE7, FF, Netscape and Opera and it all looks correct. However, when you resize the browser window to a smaller size or view in a lower resolution, say, 800X600, the content in the top right quadrant isn't all viewable. So, I was trying to set an overflow on the parent div so the scrollbar would activate when the content exceeded the parent height.

When the content of the nested div fills the containing divs available space, I want the scrollbars to activate and allow the remaining content in the nested div to be scrollable.

The closest I've come to a solution is using min-height and max-height on the child div like this:

#TRcontent div {position:absolute;bottom:0;min-height:35%;max-height:65%;}

This semi-works in IE7 & FF, but fails completely in IE6, Netscape and Opera. I haven't tested Safari.

<snip>

If there is another method or solution, that would be great. I just need to keep the layout looking the same.

Thanks for any help.

[edited by: Robin_reala at 9:22 pm (utc) on Aug. 6, 2007]
[edit reason] Removing URL as per TOS #13 [webmasterworld.com] [/edit]

[londrum]

have you tried putting the overflow property on the inner div, rather than the outer one
ie...

<div id="TRcontent">
<div> <<<<<<<<<< try putting the scrollbar on this one
<!--content goes here-->
</div>
</div>

[Dman100]

Hi,

Yes, I tried placing the overflow on the inner div and scrollbars didn't activate at all. Not sure why?

[Dman100]

If what I'm trying to accomplish is not possible, please let me know.

Thanks.