Question

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 achieve 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

Answer 1

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/