100% height for 2 column & a footer layout? [Archive]

Fembot

07-11-2006, 02:14 PM

I've been trying to create a 2 column layout that pushes the footer to the bottom of the browser window even when the text doesn't expand to the base of the page. :confused:

I'm already having enough trouble trying getting both columns to expand down at the same time

Can someone help me?

Here is the page link:
http://www.africorp.org/newbuild.html

ray326

07-11-2006, 11:11 PM

Have you checked out A List Apart's articles on Faux Columns and the Holy Grail?

Fembot

07-12-2006, 10:15 AM

thanks---I just looked faux columns up--good info...

I'm still having trouble getting my footer to push to the bottom? Any ideas?

the page's link:

http://www.africorp.org/newbuild.html

The Little Guy

07-12-2006, 11:03 AM

This is the best I could come up with
<html>
<head>
<title>text</title>
<style>
body{
margin:0;
padding:0;
}
.head{
width:100%;
height:165;
background-color:yellow;
}
.container{
width:90%;
height:70%;
}
.left{
float:left;
width:20%;
background-color:red;
padding-left:10px;
padding-right:10px;
height:100%
}
.right{
float:left;
width:70%;
background-color:white;
padding-left:10px;
padding-right:10px;
height:100%
}
.foot{
height:37px;
background-color:green;
}
</style>
</head>
<body>
<div class="head">
Images Images Images Images Images Images Images Images Images Images Images Images Images
Images Images Images Images Images Images Images Images Images Images Images Images Images
Images Images Images Images Images Images Images Images Images Images Images Images Images
</div>
<div class="container">
<div class="left">
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
</div>
<div class="right">
Words Words Words Words Words Words Words Words Words Words
Words Words Words Words Words Words Words Words Words Words
Words Words Words Words Words Words Words Words Words Words
Words Words Words Words Words Words Words Words Words Words
Words Words Words Words Words Words Words Words Words Words
Words Words Words Words Words Words Words Words Words Words
Words Words Words Words Words Words Words Words Words Words
Words Words Words Words Words Words Words Words Words Words
Words Words Words Words Words Words Words Words Words Words
Words Words Words Words Words Words Words Words Words Words
</div>
</div>
<div class="foot">
Foot Foot Foot Foot Foot Foot Foot Foot Foot Foot Foot Foot Foot Foot Foot Foot Foot Foot
Foot Foot Foot Foot Foot Foot Foot Foot Foot Foot
</div>
</body>
</html>

Fembot

07-12-2006, 11:44 AM

This is the best I could come up with

Thanks--I looked at it but it still isn't expanding to the bottom...any other ideas?