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 scro

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:

header


    
left
    
right


footer

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.