Forum Moderators: not2easy
I have only really tested this in firefox.
What I want is for the 'Division Column' to stretch the length of the page, even if the 'Cotent Column is really long'. I also want the 'Division Column' to stop and remain connected to the 'Footer' when I make my window smaller than the 'Content Column'.
Currently the 'Division Column' disconnects from the footer when you make the window smaller. I understand this is because of the height being 100%.
Any help would be greatly appreciated!
Cheers,
Tane
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<title>Some Title</title>
<style type="text/css">
html {
height: 100%;
}
body {
padding: 0px 0px 0px 10px;
margin: 0;
background: lightblue;
color:#006699;
font-family:arial,helvetica,verdana,sans-serif;
height: 100%;}
div.centrecontainer {
width: 1000px;
height: 100%;
margin: 0px auto 0px auto;
background:lightyellow;
padding: 0;
}
div.leftblock {
width: 184px;
float: left;
background: lightpink ;
height:170px;
}
div.columnblock {
top:-81px;
position:relative;
width: 170px;
margin-top: 1px;
float: left;
height: 100%;
background:lightgreen;
}
div.columnblock div.top {
width: 170px;
margin-top: 20px;
height: 206px;
position: relative;
z-index: 1;
}
div.contentblock {
width: 550px;
float: left;
margin-bottom: 100px;
height:400px;
background:lightgrey;
}
div.clear {
width: 100%;
line-height: 0;
font-size: 0;
margin: 0;
padding: 0;
clear: both;
}
div.footer {
width: 1000px;
float: left;
bottom: 0px;
height: 80px;
border:1px solid coral;
margin-top: -81px;
}
</style>
</head>
<body>
<div class="centrecontainer">
<div class="leftblock">Menu Column</div>
<div class="columnblock">
<div style="margin-top:81px;">Division Column</div>
</div>
<div class="contentblock">Content Column</div>
<div class="clear"> </div>
<div class="footer">Footer</div>
</div>
</body>
</html>
[edited by: SuzyUK at 10:11 am (utc) on Feb. 12, 2007]
You'll find one alist apart article that may help you.
Cheers,
Mehigh
Mostly with CSS Layouts you need a change in thinking. Do not think of a grid that can be sliced and and put together in a pixel perfect way.. you need to think illusion and suggestion, for this reason I'm also a fan of faux columns, they give the illusion of column stretching, without needing to specify/restrict heights
If you search for ["Equal Height Columns"] [google.com] you will see the question has been agonised over for ages, any solutions offered might work only in very specific circumstances, but not work so well in practice, others are fine if you find the one that suits your purpose.
If I wanted an equal height layout I would indeed use faux columns but that is my preference, some others swear by Yahoo Grids [developer.yahoo.com] (which I think is almost akin to using layout tables ;)) and some others will stress over the "One True Layout" - the former might be good for a plug and play solution (if you don't deviate from the rules) the latter is an excercise in experimentation unless you know CSS inside out.
All of the above is IMHO only
