Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    The 100% height problem

    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:
    Code:
            <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:
    Code:
    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?
    Last edited by cosmoray; 07-01-2011 at 10:17 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    You'd need to adopt a liquid faux column technique.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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+.
    Last edited by cosmoray; 07-02-2011 at 01:32 AM.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Quote Originally Posted by cosmoray View Post
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •