Forum Moderators: not2easy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
margin:0 auto;
text-align:center;
background:#999;
height:100%;
}
#container {
width:1000px;
margin:0 auto;
text-align:center;
}
#left, #right {
float:left;
width:25px;
height:100%;
background:#444;
}
#center {
float:left;
width:950px;
height:100%;
background:#fff;
}
.clr {
clear:both;
}
</style>
<body>
<div id="container">
<div id="left">a</div>
<div id="center">This is the center</div>
<div id="right">b</div>
<br class="clr" />
</div>
</body>
</html>
As you can see, they are not being stretched to 100% height. I am wondering if there is maybe another way to do this without using floats? I experimented using position absolutes, but the layout kept breaking and breaking even more on IE. Anybody have any ideas?
There is one exception: the root has the height of your viewport.
So adding
html, body, container {
height: 100%
}
It's much easier to forget the idea of having your columns of equal height and fake the background effect by having an image on the parent nd stretch that one to encompass the floated columns.
Add ign a min-height to make sure it fills the screen can then be done and the footer can easily be positioned at the bottom.
