Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test CSS</title>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
background-color: gray;
}
div.container {
border-left: 10px navy solid;
height: 100%;
}
div.leftlink {
float: left;
background-color: green;
width: 200px;
height: 100%
}
div.linkbar {
background-color: purple;
color: white;
width: 100%;
}
div.main {
border-left: 10px cyan solid;
border-right: 10px lime solid;
margin-left: 200px;
margin-right: 150px;
height: 100%;
background-color: yellow;
}
div#footer {
background-color: red;
height: 20px;
width: 100%;
clear: both;
}
div.rightside {
float: right;
background-color: #008080;
width: 150px;
font-size: 11px;
text-align: center;
height: 100%;
}
</style>
</head><body>
<div class="container">
<div class="leftlink">
<div class="linkbar">
Some Links </div>
Link 1<br />
Link 2<br />
Link 3<br />
Link 4<br />
Link 5<br />
Link 6<br />
Link 7<br />
Link 8</div>
<div class="rightside">
<div>Some info here<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
more text down here!
</div>
</div>
<div class="main">
<h2>Some Content Here</h2>
This is the content.</div>
</div>
<div id="footer"></div>
</body>
</html>
So yes it's not going to work as you intend in many cases.
One solution is to use absolute positioning on the main part of the text using the 4 borders (IE6 needs major help to get this done, but it's possible).
Example here: [webmasterworld.com...]
The drawback is that the scrollbar will move from the browser to the div.
The other solution is to have your background (if needed with faux-columns) on the html that you make 100% high of the viewport and use position:fixed on your footer. Next add some padding on your wrapper to make sure it clear the fixed element.
Again IE will need serious help as IE6 doesn't support position:fixed this at all. (IE7.js adds it the capability)
