Question

I’m trying to build the simple layout that I have got in the image below. (1),(2) and (3) are required content panes – (4) I’m not sure if I need for positioning.

My main problem is that the height of (1) needs to be set relatively to be 75% of window (viewport) height. Below it, I want to have content added separately, that can have variable height. And on the right, I want a single independent column of content with variable height.

I think I need to put (1) and (2) into (4) to let them float together to the left of (3) properly. But if I do that, I can’t set the height of (1) to 75% because it’s now relative to (4), which as a float, has zero height. But if I then set (4) to 100% height of window, that will cause problems when content in (3) grows.

What am I missing?

Ps. It’s important that (1) has a fluid height and is always 75% of the current viewport height – otherwise I could have set it via javascript on load. I could technically extend this to resize the window procedurally whenever the window height is changed, but there should be a more elegant CSS way to do this.

Answer 1

A pure CSS solution requires that there’s no border around (4), the left column, because we need to give it height:100% but allow overflow:visible so that (2), the bottom left pane, isn’t cut off.

html, body {
    height: 100%;
}
#cont1, #cont2 {
    width: 45%;  /* or something less than 50% */
    float: left;   
}
#cont1 {
    height: 100%;
    overflow: visible;
}
#sub1 {
    height: 75%;
}​

http://jsfiddle.net/tMUMj/3/

However, using JavaScript to resize the left top pane isn’t as inelegant as you might think. Using jQuery:

$(document).ready(function() {
    $(window).trigger('resize');
});
$(window).on('resize',function() {
    $('div#lefttoppane').height( 0.75 * $(window).height() );
});

http://jsfiddle.net/tMUMj/

The computation itself is now restricted to one line of code, plus two event handlers, one of which triggers the other.