Does CSS3 offer a better way to have a two column website with header and footer, equal height columns and stretchy column widths?

I wrote a website a while ago that is a little messy in how it does things. I used this CSS template and this equal height columns trick. I have not one but two container divs and I can't remember what they're doing. This seems unsatisfactory. So I'm thinking of restructuring the thing from scratch, and possibly making use of the more "semantic" html5 tags like <nav> and so on. I'm wondering if there are CSS3 type things I can do today that will improve the code.

The question is: is there a better way to ach开发者_开发百科ieve a site structure with these properties:

• 2 equal height columns: one navigational sidebar, one main content column (with widths as percentages of the available real estate, not explicitly stated)
• both a header and footer element that stretch the whole width of the total of the two main columns
• That allows the use of semantic html5 tags instead of several meaningless container divs

---

In css3 there are display properties that allow your divs to behave like html tables. I.E:

 #wrapper {
    display: table;
 }

 #wrapper div {
    display: table-cell;
 }

Even though at first sight it seems a regression to the old table days, in practice it's tremendously useful and the code ends very readable.

Here is a jsfiddle example with the kind of the kind of layout you're describing: http://jsfiddle.net/duopixel/SKxCH/

---

In fact, CSS3 has a multi-column feature which allows you to divide an element into equal columns. Quirksmode.org has a good write up on it: http://www.quirksmode.org/css/multicolumn.html

Give it a go; if you could get it working, I think it'd answer all your requirements. However, it doesn't work in IE, and even other browsers only implemented it recently. Judge for yourself, but my feeling is it might be a while yet before it has enough browser support to be worth using.