...

View Full Version : HOW TO: two column layout with 100% height?



emehrkay
12-01-2006, 07:54 PM
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

Arbitrator
12-01-2006, 09:11 PM
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.

emehrkay
12-02-2006, 12:45 AM
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?

_Aerospace_Eng_
12-02-2006, 07:06 AM
Guess you won't know until you try it. Be sure the right div comes before the left one in the markup.

Arbitrator
12-02-2006, 11:03 AM
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.

emehrkay
12-02-2006, 01:36 PM
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



<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum