Hi all,
I'm using this layout to create a 2 column fluid web page.
What I can't seem to do is make it so that both the columns in the layout have a height of 100% therefore pushing the footer to the bottom of the page!
Whats the best way to achieve this effect?
Thanks in advance!
hopefully this is what you're looking for:
http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm
Try a different layout, why waste your time trying to hack a cross-browser solution?
This seems to be what you need, but I'm sure you can find others: http://www.savio.no/examples/three-column-layout-6.asp
I do the following in my personal site's CSS file:
#footer
{width: 100%;
bottom: 0px;
padding-top: .5em;
padding-bottom: .5em;
background-color: #ffffff;
border-top: 1px #000000 solid;
text-align: center;
margin-top: .25em;
}
Also, I have little in the way of nested div tags. I prefer to have the elements float around each other.
have 2 div tags, each as a column floating next to each other, and another div tag to clear the floats, then lastly another div to be the footer:
<div id="col1"></div>
<div id="col2"></div>
<div clear="c"></div>
<div id="footer"></div>
<style type="text/css"><!--
#col1{
float:left;
width:80%;
}
#col2{
float:right;
width:20%;
}
.c{
clear:both;
}
#footer{}
--></style>
With this, it's also easier to make it a 3 column.
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
<div clear="c"></div>
<div id="footer"></div>
<style type="text/css"><!--
#col1{
float:left;
width:200px;
}
#col2{
float:right;
width:300px;
}
#col3{
width:400px;
margin-left:200px;
margin-right:300px;
}
.c{
clear:both;
}
#footer{}
--></style>
Here's another way...
<div id="container">
<div id="col1"></div>
<div id="col2"></div>
</div>
<div id="footer"></div>
<style type="text/css"><!--
body { height: 100% }
#container { height: 100% }
#col1 { height:100%; float:left; width: 70% }
#col2 { height:100%; float:right; width: 30% }
#footer { height: 50px; clear: both }
--></style>
Last time i read about this the best answer was "display: table;" for the main container
then "display: table-cell;" for each column. This will make the column the height that you specify.
Demo here : http://zubeta.com/dev/equal-height.html
<html>
<head>
<style type="text/css">
#wrap {
background: orange;
display: table;
height: 88%;
width: 550px;
padding: 11px;
}
#col1 {
display:table-cell;
background: #808080;
width: 222px;
border: 1px solid #FFF;
padding: 12px;
}
#col2 {
display:table-cell;
background: #808080;
width: 111px;
border: 1px solid #FFF;
padding: 12px;
}
</style>
</head>
<body>
<!-- this container will determine the height of both columns -->
<div id="wrap">
<div id="col1">
<p>Lorem ipsum something or other.</p>
</div>
<div id="col2">
<p>More Lorem than ipsum.</p>
</div>
</div>
<!-- end container -->
</body>
</html>