Forum Moderators: not2easy
The CSS:
@import "all.css"; /* just some basic formatting, no layout stuff */
body {
margin:10px 10px 0px 10px;
padding:0px;
background-color:#9ECBE2;
}
#leftcontent {
margin-top:5px;
left:10px;
width:200px;
float:left;
}
#centercontent {
margin-left: 199px;
margin-right:199px;
margin-bottom: -19px;
/* box model hack*/
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 204px;
margin-right:135px;
margin-top:5px;
}
html>body #centercontent {
margin-left: 207px;
margin-right:137px;
margin-top:5px;
}
#rightcontent {
margin-top:5px;
float: right;
width:130px;
}
html>body #centercontent {
top:-2px;
}
#banner {
background:#fff;
height:40px;
voice-family: "\"}\"";
voice-family: inherit;
height:80px;
border:0px double #000;
}
html>body #banner {
height:80px;
}
#banner2 {
background:#fff;
margin-bottom:10px;
height:40px;
voice-family: "\"}\"";
voice-family: inherit;
height:80px;
border:0px double #000;
}
html>body #banner2 {
height:80px;
}
#contentdivs{
background-color:#fff;
margin:0px;
border-style:double;
margin-bottom:5px;
padding:0px;
}
the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Site</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="banner">Header</div>
<!--START LEFT SIDE BAR -->
<div id="leftcontent">
<div ID="contentdivs">
this is expands with content<br>
</div>
<div ID="contentdivs">
this is expands with content<br>
</div>
<div ID="contentdivs">
this is expands with content<br>
</div>
</div>
<!--END LEFT SIDE BAR -->
<!--START RIGHT SIDE BAR -->
<div id="rightcontent">
<div ID="contentdivs">
this is expands with content
</div>
<div ID="contentdivs">
this is expands with content
</div>
</div>
<!--END RIGHT SIDE BAR -->
<!--START CENTER CONTENT -->
<div id="centercontent">
<div ID="contentdivs">
this is expands with content
</div>
<div ID="contentdivs">
this is expands with content
</div>
</div>
<br style="clear:both">
<div id="banner2">footer</div>
</div>
</body>
</html>
I ran some more tests, and I've added it to the repository thread [webmasterworld.com]. (with some minor adjustments)
the box model hack was not necessary in this demo so it was displaying slightly off in IE5.x/Win and re: the content divs changed to class from an ID, there should only be one instance of an ID per page..
Thanks for posting it
Suzy :)
