Does CSS3 offer a better way to have a website with two columns with a header and footer, columns with the same height and width of the width of the columns?

Question

I wrote a website a while ago, which is a bit messy in how it does it. I used this CSS template and this equal height column trick . I have none but two containers, and I cannot remember what they are doing. This seems unsatisfactory. Therefore, I am thinking about rebuilding things from scratch and, possibly, using more “semantic” html5 tags, such as <nav>and so on. I am wondering if there are things like CSS3 that I can do today that will improve the code.

The question arises: is there a better way to achieve a site structure with these properties:

• 2 columns with the same height: one navigation sidebar, one main content column (with a width as a percentage of available real estate, not specified explicitly)
• both a header element and a footer that stretches the entire width of the two main columns
• This allows the use of html5 semantic tags instead of several meaningless div containers

Answer 1

Css3 has display properties that allow your divs to behave like html tables. I.e:

 #wrapper {
    display: table;
 }

 #wrapper div {
    display: table-cell;
 }

Although at first glance it seems a regression for the old desktop days, in practice it is extremely useful, and the code ends up being very readable.

jsfiddle , : http://jsfiddle.net/duopixel/SKxCH/

Answer 2

, CSS3 , . Quirksmode.org : http://www.quirksmode.org/css/multicolumn.html

; , , . IE, . , , , , .