How to lay out an HTML page in top, bottom, & right parts? (Second round)

Question

This is a fork of a question that I posted a few days ago with the same basic title.

To recap what I'm trying to do:

I want an HTML page in three parts. One (TOP) occupies the upper left part of the window. Another (BOTTOM) occupies the lower left part. One (RIGHT) occupies the right part.

TOP and BOTTOM have the same fixed width. RIGHT fills the remaining width of the window.

BOTTOM expands vertically to fit its content. TOP fills the remaining height of the window and has a minimum height. RIGHT fills the height of the window.

TOP and RIGHT scroll vertically if their content overflows. BOTTOM hides its overflow.

Although I still don't understand the CSS properties well, I've written code that does almost exactly what I want, as far as the behavior or the parts is concerned. The only problem is that TOP appears to fill the height of the window -- not the part left unoccupied by BOTTOM. Thus, as I shorten the window, TOP does not start scrolling until the window becomes shorter than TOP's text, even though BOTTOM hides the end of the text before that.

<div id='left' style='position:fixed; left:0; top:0; bottom:0; width:250px; height:100%;'>
   <div id='top' style="background:#ffe0e0; float:top; width:100%; height:100%; min-height:128px; overflow-y:auto">
      text top . . .
   </div>
   <div id='bottom' style="background:#f0fff0; position:absolute; left:0; bottom:0; width:100%; height:auto; overflow-y:hidden">
      text bottom . . .
   </div>
</div>
<div id='right' style="background:#e0e0ff; position:absolute; left:250px; top:0; bottom:0; height:auto; overflow-y:auto">
   text right . . .
</div>

What should I do to make TOP end at the top of BOTTOM, rather than the bottom of the window?

Answer 1

A start would be looking into positioning - I would guess you do not want to use absolute for this, also read up on floating.

http://www.w3schools.com/cssref/pr_class_position.asp

http://www.w3schools.com/css/css_float.asp

All good places to start. I will second that it'd be helpful if you found a better way to explain what you're attempting.