Question

I want to have layout, which is similar by structure to Thunderbird classic view ( http://kmgerich.com/pinstripe/screenshots/mail/classic-view.png ) – header with 100% width, 1st pane – left – height – fullscreen (excepting header, ofc), 2nd pane – right top – 50% of screen height (excepting header), right bottom – 50% of screen height. The panes should have fixed height – in case if content has large height, scrollbars should appear.
Now I have smth like this:

#header {
    height:30px;  
}

#left {
    position: absolute;
    left: 0;
    width: 50%;   
}

#right-top {
    position: absolute;
    right: 0;
    width: 50%;
    height:50%;
    overflow: auto;
}

#right-bottom {
    position: absolute;
    right: 0;
    width: 50%;
    bottom: 1px;
    height:50%;   
}

http://jsfiddle.net/MCC5E/

The current problems: left pane is not full height, right top pane overlap right bottom pane (it can be checked in Firebug).

Is there any way to achieve such layout?

Answer 1

Something like this http://jsfiddle.net/Znarkus/cwyuv/? I set pos: abs on #pane to make the divs inside position relative to it. Then top: 0; bottom: 0; on #left so it fills up the height. Also, don’t forget to set the height of body.