Resolved The 100% height problem

[cosmoray]

I've got a liquid 3 column layout with a header and footer. I'm trying to get the 3 columns to 100% height. Basically, I want the page to cover the user's entire window.

Here's what I've got so far:

        <div class="wrapper">
            <div id="header">
            HEADER
            </div>
            <div class="container">
                <div id="left">
                LEFT
                </div>
                <div id="center">
                CENTER
                </div>
                <div id="right">
                RIGHT
                </div>
            <div id="footer">
            FOOTER
            </div>
            </div>
        </div>

And the CSS:

html, body {
	height: 100%;
}
/* --------------- WRAPPERS */
.wrapper {
	padding: 0;
	width: auto;
}
/* --------------- GLOBAL */
/* --------------- HEADER */
#header {
}
.container {
	height: 100%;
	min-height: 100%;
	position: relative;
}
/* --------------- LEFT PANEL */
#left {
	float: left;
	width: 20%;
}
/* --------------- CENTER PANEL */
#center {
	float: left;
	width: 60%;
}
/* --------------- RIGHT PANEL */
#right {
	float: left;
	width: 20%;
}
/* --------------- FOOTER */
#footer {
	clear: both;
	position: relative;
}

What am I doing wrong?

[abduraooft]

You'd need to adopt a liquid faux column technique.

[cosmoray]

Alright, I've revised the code and ALMOST have it the way I want it.

Edit: resolved.

Edit 2: should be noted the issue WAS NOT resolved using the "faux column" technique. I used pure CSS that also works in IE 5.5+.

[abduraooft]

Originally Posted by cosmoray

Edit 2: should be noted the issue WAS NOT resolved using the "faux column" technique. I used pure CSS that also works in IE 5.5+.

Please share your solution.