Forum Moderators: not2easy
I found this tutorial on ur website for creating div tags that extend all the way down the page.
[webmasterworld.com...]
However it seems that this only works if the positioning is absolute. For a centered fix width layout this absolute positioning will not work. Does anyone have a suggestion on how you could accomplish this in a different way?
This is what i have so far (it doesn't work)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fixed Width Centered Layout</title>
<style>
body {
background: #333333;
margin:0;
padding:0;
height:100%; /* this is the key! */
color: #333333;
}
#container {
position:relative;
margin-left:auto;
margin-right:auto;
width: 852px;
height:100%;
background: #999999;
}
</style>
</head>
<body>
<div id="container">
Here is where i want my div tag to go all the way down the page. <br /><br />
Here is where i want my div tag to go all the way down the page. <br /><br />
Here is where i want my div tag to go all the way down the page. <br /><br />
</div>
</body>
</html>
Right now the column only goes as far as my content goes.
Thanks in advance for any suggestions!
body {
background: #333;
height:100%; /* this is the key! */
margin: 0 auto;
width: 852px;
}
#container {
height:100%;
background: #999;
}
Weird: (at least to me)
if you set body to position:absolute... it left-aligns the div (and it does stretch all the way down)
position:relative on the body doesn't seem to do anything FYI.
that worked like a charm.
[edited by: Xapti at 6:35 pm (utc) on May 8, 2007]
