Forum Moderators: not2easy
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>TEST1</title>
<style type="text/css">body
{
margin:0px 0px 0px 0px;
padding:0px;
height:100%;
background:#364A75;
}
#leftcontent
{
position: absolute;
left:0px;
top:100px;
width:200px;
}
#centercontent
{
margin-top:0px;
margin-left: 200px;
margin-right:200px;
}
#rightcontent
{
position: absolute;
right:0px;
top:100px;
width:200px;
}
#header
{
background:#FF0000;
height:100px;
}
#footer
{
background:#0000FF;
height:100px;
}
#element
{
margin: 10px;
background:#fff;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="header">Header content</div>
<div id="leftcontent">
<div id="element">
left block1
</div>
<div id="element">
left block2
</div>
<div id="element">
left block3
</div>
<div id="element">
left block4
</div>
</div>
<div id="centercontent">
<div id="element">
center block 1
</div>
</div>
<div id="rightcontent">
<div id="element">
right block 1
</div>
<div id="element">
right block 1
</div>
<div id="element">
right block 1
</div>
<div id="element">
right block 1
</div>
</div>
<div id="footer">footer content</div>
</body>
</html>
Good thread here [webmasterworld.com...]
I can't think of how to do this without min-height, (no IE support there), I could only think to do it with javascript
You could replace your position:absolutes with float:left and float:right, then give the footer a clear:both.
That might do it for you.
That is the only way that works, that I'm aware of.
The solution (well, A solution) is to use negative margins to position the content where you want it. This is a process described by Ryan Brill in an A List Apart article about negative margins.
Another solution, one I've used but am not crazy about, is to use javascript to dynamically write the sidebar content into the page when it loads. The script can detect the browser and, if it finds Netscape 4.x, writes the code in a different place, thus displaying the page how you want.
I have seen pages (the one BlueEyz mentioned turns out to be one of them) that use position:absolutes and a clear: both in the footer. ThisAPPEARS to fix the problem, but actually doesn't. That site (and others like it) achieve the appearance of the effect you want by always keeping the content div fuller than the sidebars.
Bottom line, if you need the content first in the source code, I would check out the negative margins article.
Good luck and keep us posted.
Other then that, style sheets are really growing on me :)
I created the HTML layout that I want for my templates (first decided how many elements I'd need, then simply stuck them in divs in the html), and now I'm creating different stylesheets for the exact same HTML document.
Working out pretty well so far! Hitting a few snags, this one in particular; putting elements in a different place on the page than where they appear in the code can be troublesome.
This negative margin thing.. is this considered an elegant solution?
