Question

So, this web application I’m working in haves three vertical columns expanding for the entire window height, and a footer div expanding for the entire width. The layout looks like this:

+|+
---

where + means a liquid column, | means a fixed column, and - the footer.

I’ve done the element positioning using absolute and relative positioning with some tweaks using jQuery. But I want to know if there is a way of doing this with CSS3 only.

Thanks!

Answer 1

This neglects all browser not supporting the box-orient and box-flex properties (like IE).

Demo: http://jsfiddle.net/p8vBC/11/

CSS:

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

body > #main {
    display: -webkit-box;
    -webkit-box-orient: horizontal;

    display: -moz-box;
    -moz-box-orient: horizontal;

    display: box;
    box-orient: horizontal;

    height: 100%;
    margin-bottom: -100px;
}

footer {
    height: 100px;
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
}

aside {
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
}

#content {
    width: 400px;
}

HTML:

<div id="main">
    <aside id="left"></aside>
    <div id="content"></div>
    <aside id="right"></aside>
</div>

<footer></footer>