CSS fullscreen grid layout (with some scrolling sections)

Question

So, it's 2010 and I still don't know how to do this layout in CSS..

Sorry if this has an obvious answer, I appreciate any help you could offer.

I've seen close solutions for parts of this, but not all of these combined.

1. The layout must always fill the screen (unknown dimensions and dynamic resize)
2. A, D, C, F are fixed height (e.g. 64px)
   • B and E must expand to fill the remaining vertical space.
   • If either B or E run out of room, a vertical scrollbar should appear (only within its area; B and E should scroll independently of each other).
3. A, B, C are fixed width (e.g. 300px)
   • D, E, F must expand to fill the remaining horizontal space.
4. A, B, C are semantically related content.
5. D, E, F are semantically related content.
6. No other scrolling should occur apart from 2 above.
7. C is optional
8. Newer browsers only, I don't care about IE6 or 7

Answer 1

Ah, I struggled with this for a while...the result is much easier than expected, however.

A {
    position: absolute;
    top: 0;
    left: 0;
    height: #px;
    width: #px;
}
B {
    position: absolute;
    top: {height of A};
    left: 0;
    width: #px;
    bottom: {height of C};
    overflow-y: scroll; /* note that the scrollbar will always be visible */
}
C {
    position: absolute;
    left: 0;
    width: #px;
    bottom: 0;
    height: #px;
}
D {
    position: absolute;
    top: 0;
    left: {width of A};
    right: 0;
    height: #px;
}
E {
    position: absolute;
    top: {height of D};
    left: {width of B};
    right: 0;
    bottom: {height of F};
    overflow-y: scroll;
}
F {
    position: absolute;
    left: {width of F};
    right: 0;
    bottom: 0;
    height: #px;
}

Note that #px should be replaced by the size. Hope this helps!