CSS layout that fills available space

Question

I\'m trying to do a seemingly simple webpage layout, but I\'m hitting a wall.

I\'d like to do everything purely with CSS (no tabl

Answer 1

If anyone's interested I developed a layout that uses css to emulate dynamic table behaviour [using divs]. It works in Chrome, Firefox and IE>7.

DEMO, have a go at resizing the window

As it stands all five components grow as their respective contents do, however, if you really want your left and right sides fixed just apply a width rule to .east and .west.

Have a fiddle with it.

Code:

    

        n
    

    

        

            w
        

        

            c
        

        

            e
        
    

    

        s
    

html, body {
    height : 100%;
    margin : 0;
}

.view,
.view > .middle {
    display : table;
}

.view > .north,
.view > .south {
    height : 1px;
    display : table-row;
}
.view > .north { vertical-align : top; }
.view > .south { vertical-align : bottom; }

.view > .middle > div {
    display : table-cell;
}
.view > .west,
.view > .east {
    width : 1px;
}

/*div { border : 1px solid black; }*/

Simple markup, no JS, and dynamic layout. Uncomment the border css line to see whats going on.
At the bottom of your question I see you tried using tables but with issues. Placing a max-height on centre or middle might be what you want (for the scrollbar thing). Maybe this can help you.