Webpage: Multiple scroll areas with variable height

Question

I want to create a html page with a header of fixed height, a middle part with variable height and a footer with fixed height. The footer and the header shall not move when scrolling.

No problem so far.

But i want the midlle part to be divided, so that the right column and the left column have seperate scrollbars and scroll independently. This is possible with overflow:scroll as long as the parts have fixed heights. But i want them zu grow and shrink with the window.

I do not linke frames and i want to alter the contents of the 2 columns frequently using javascript (ajax).

What is the best way to create such a page?

Answer 1

I've tested this in IE7/8 (not 6!) and recent versions of: Firefox, Chrome, Opera.

Live Demo (complete with boring colours)

The HTML is very simple:

<div id="header">header</div>

<div id="middle">
    <div id="left">left</div>
    <div id="right">right</div>
</div>

<div id="footer">footer</div>

On the other hand, the CSS is a bit more complicated:

html, body {
    margin: 0; padding:0; border: 0;
    overflow: hidden
}
#header, #middle, #footer {
    position: absolute;
    width: 100%
}
#header {
    background: #777;
    height: 150px;
    top: 0
}
#middle {
    background: #f00;
    top: 150px;
    bottom: 150px
}
#footer {
    background: #777;
    height: 150px;
    bottom: 0
}
#left, #right {
    overflow-y: scroll
}
#left {
    background: #aaa;
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%
}
#right {
    background: #999;
    position: absolute;
    left: 50%;
    top: 0;
    float: right;
    width: 50%;
    height: 100%
}

I will explain how the CSS works if you ask me to.