multiple dynamically-sized boxes?

[wombat]

Hi,

I've been banging my head against the wall for several days trying to produce CSS for a complicated layout, and I could really use some help from a guru. Below is a simplified (and eye-popping) mockup of the layout. The requirements for the layout are thus:

purple: the main window
green: dynamic content of variable height. must not scroll or clip.
red: height = purple.height - green.height
yellow: fixed height items, not really an issue
blue: dynamic content of variable size. this box must scroll

I have emphasized the red box, because that seems to be the wall i'm hitting. if i could get the browser to assign the proper height to the red box, then i can use absolute (oh noes!) positioning for yellow and, more importantly, blue.

I have a basic structure, but could really use some help filling in the blanks:

#purple { position: relative; height: 100%; }
#green { position: relative; }
#red { /* oh noes! */ }

/* yellow assumes that its bound by red, not purple */
.yellow {
position: absolute;
height: 10px;
}
#yellow1 { top: 0px; }
#yellow2 { top: 10px; }
#yellow3 { bottom: 0px; }

/* blue assumes that its bound by red, not purple */
#blue {
position: absolute;
top: 20px;
bottom: 10px;
}

Thanks for any help!
-w

http://www.csscreator.com/files/layout.gif