Question

I have another CSS problem. A layout that escapes me.

I could, I suppose, get the desired effect by messing about with JavaScript, but that always bugs me – it leads to having the code that controls the layout split between the markup file and the CSS file and the javascript file, and that just makes maintenance a mess.

I’ve created an example of what I don’t quite want: http://jsfiddle.net/4sCKq/1/

The split between header and body is fixed – it’s a project-wide thing that I can’t change for this page. You’ll notice that the header has a fixed height, and the body takes up the rest. This cannot change.

The problem is the left div, within the body.

You’ll notice here that the left div has a fixed width, and the main div takes up the rest. This also cannot change.

You’ll notice that the left div has a variable height, taking up what is left of the browser window, from the header down. Yep, this is also required.

And at the bottom of the left div I have a fixed-size div, that has the same width as the left div, and a fixed height, and that stays at the bottom, as the window resizes. This is also required.

What is left is the left-main div. I want this to take up all of the left div that is not contained by the left-bottom div. That is, between the two of them, left-main and left-bottom should completely fill the left div, regardless of the size of the browser window. But, as the window resizes, it should be the left-main div that grows and shrinks, the left-bottom div should remain at the bottom of the window, and its size should stay constant.

I’ve added the show-top and show-bottom divs solely to make it clear where the limits of the left-main div are. If you give left-main a large enough height, it looks like it is filling the div, but in fact it is disappearing behind the left-bottom div. The fact that you can’t see the show-bottom div reveals that. I cannot have this – I need all of what is within the left-main to be visible.

So, any ideas?

Answer 1

Rather than define a height you can define the bottom absolute pixel value.
Changing one line in your jsfiddle seems to do it, if i understand the question:

#left-main
{
    background-color: #AA9977;

    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 100px;
}