...

View Full Version : Resolved The 100% height problem



cosmoray
07-01-2011, 05:54 PM
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
07-01-2011, 06:04 PM
You'd need to adopt a liquid faux column (http://www.communitymx.com/content/article.cfm?cid=afc58) technique.

cosmoray
07-01-2011, 08:26 PM
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
07-02-2011, 06:44 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum