What's the Proper way to achieve 3-Column layout with fluid center

Question

I am working on a 3-column layout with two fixed-width sidebars (left and right) and a fluid center. I have followed A List Apart's Holy Grail article, and, although this works fine in most browsers, I am having some problems in Internet Explorer 7+.

The problem with IE 7+ actually doesn't stem from this technique, but rather from the fact that the page is rendering in quirks mode. If I make it render in standards-compliance mode, however, many outdated elements become displaced and would require a complete re-writing.

Given that this article dates a few years, is this the most up-to-date reference on the subject? Or should I be applying a different technique?

Any insight on the best way to do this will be greatly appreciated.

Answer 1

There's really no point in floating the columns.

HTML:

<div id="wrapper">
    <div id="left"></div>
    <div id="center"> Center content</div>
    <div id="right"></div>
</div>

CSS:

#left {
    position:absolute;
    left:0;
    width:50px;
    height:100%;
    background-color:pink;
}

#center {
    height:100%;
    margin: 0 50px;
    background-color:green;
}

#right {
    position:absolute;
    right:0;
    top:0;
    width:50px;
    height:100%;
    background-color:red;
}

body, html, #wrapper {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}

Demo: http://jsfiddle.net/AlienWebguy/ykAPM/