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 6 of 6
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    190
    Thanks
    1
    Thanked 2 Times in 2 Posts

    HOW TO: two column layout with 100% height?

    i knwo this is common but i feel that my take on this may be a lil different.

    i want a two column with the right side being a fixed width left side being variable but combined they take up 100% of the screen

    here is what i tried
    html, body{
    height: 100%;
    }
    div{
    height: 100%
    }
    #left{
    float: left;
    width: 100%;
    margin: 0 250px 0 0;
    }

    #right{
    float: left;
    width: 250px;
    }

    that doesnt work, its like the left is still 100% of the screen and the right just floats on top of it and the 100% height trick doesnt work either

    simple example of what im trying to do
    http://img169.imageshack.us/img169/3218/layoutwx5.jpg

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,315
    Thanks
    29
    Thanked 279 Times in 273 Posts
    You made the width 100 percent, so obviously it’s going to be 100 percent of the width of it’s parent wide, not 100 percent minus 250 pixels. The fix: get rid of float: left and width: 100% on the #left element and change the #right element’s float declaration to float: right. If you need a working example to figure it out, I have one up at http://jsg.byethost4.com/kana2.html.

    To get the illusion of 100 percent height, stick a vertically repeating background image behind one of the columns on the container element. Since the container element will always adjust to the height of the tallest column, you’ll have the illusion of columns of equal height. The is also demonstrated with the hyperlinked example.

    If you need the columns to take up the height of the viewport when you have a negligible amount of content, set the html, body, container element, and any children between the container and body elements to have a 100 percent min-height. If you want Internet Explorer 6 compatibility, give that browser height instead of min-height since Microsoft forgot to tack the min- onto their (pseudo) height property.
    Last edited by Arbitrator; 12-01-2006 at 09:21 PM. Reason: forgot to address something
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Regular Coder
    Join Date
    May 2005
    Posts
    190
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Arbitrator View Post
    You made the width 100 percent, so obviously it’s going to be 100 percent of the width of it’s parent wide, not 100 percent minus 250 pixels. The fix: get rid of float: left and width: 100% on the #left element and change the #right element’s float declaration to float: right. If you need a working example to figure it out, I have one up at http://jsg.byethost4.com/kana2.html.

    To get the illusion of 100 percent height, stick a vertically repeating background image behind one of the columns on the container element. Since the container element will always adjust to the height of the tallest column, you’ll have the illusion of columns of equal height. The is also demonstrated with the hyperlinked example.

    If you need the columns to take up the height of the viewport when you have a negligible amount of content, set the html, body, container element, and any children between the container and body elements to have a 100 percent min-height. If you want Internet Explorer 6 compatibility, give that browser height instead of min-height since Microsoft forgot to tack the min- onto their (pseudo) height property.
    if i take away the width, how will the left div fill out the remaining area that the right one isnt takign up?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Guess you won't know until you try it. Be sure the right div comes before the left one in the markup.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,315
    Thanks
    29
    Thanked 279 Times in 273 Posts
    Quote Originally Posted by emehrkay View Post
    if i take away the width, how will the left div fill out the remaining area that the right one isnt takign up?
    Yeah, it does help if you try and experiment on your own a bit; otherwise you’re not going to learn anything.

    Anyway, the direct answer is that div elements expand automatically to fill up all horizontal space available; they stop doing that when you float them, position them, or use certain display declarations. Since I told you to remove the float and the width, that shouldn’t be a problem though. The whole point is that you want the “left side [to be] variable” in width.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    Regular Coder
    Join Date
    May 2005
    Posts
    190
    Thanks
    1
    Thanked 2 Times in 2 Posts
    hey guys, thanks for your help. i figured out the variable width thing with kinda a kludge, but it does work in all major browsers pc & mac. i just need to tweak it so that during a resize the left one would have a min-width for ie and ff.

    next up is the 100% height issue, but that has been addressed 100 times so it should be a simple fix

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #left{
    float:left;
    background-color:#FF66CC;
    border: 1px solid #000;
    margin-left: -300px;
    width: 100%;
    
    }
    #right{
    width:298px;
    float:left;
    background-color:#CCCCCC;
    
    }
    #content{
    margin-left: 300px;
    border: 3px solid red;
    display: block;
    width:auto;
    
    }
    #menu{
    	position: fixed !important;
    	position: absolute;
    width: 290px;
    height: 200px;
    background-color:#000000;
    }
    #footer{
    width: 100%;
    clear: both;
    }
    </style>
    </head>
    <body>
    	<div id="left">
    		<div id="content">
    			left asdflkfajls
    		</div>
    	</div>
    	<div id="right">
    		right asldfajsdlfk
    	</div>
    	<div id="footer">
    		footer asdjflasdf
    	</div>
    </body>
    </html>


  •  

    Posting Permissions

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