Header, footer and sidebars have fixed position. In the center a content area with both scroll bars. No outer scroll bars on the browser. I have a layout that works in IE7 and FF. I need to add IE6 support. How can I make this work?
Here is an approximation of my current CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Layout</title>
<style>
*{margin:0px;padding:0px;border:0px;}
.sample-border { border: 1px solid black; }
#header{
position:absolute;
top:0px;
left:0px;
right: 0px;
height:60px;
}
#left-sidebar{
position:absolute;
top:65px;
left:0px;
width:220px;
bottom: 110px;
}
#right-sidebar{
position:absolute;
top:65px;
right:0px;
width:200px;
bottom: 110px;
}
#footer{
position:absolute;
bottom:0px;
left:0px;
right: 0px;
height:105px;
}
@media screen{
#content{
position: absolute;
top: 65px;
left: 225px;
bottom: 110px;
right: 205px;
overflow:auto;
}
body #left-sidebar, body #right-sidebar, body #header, body #footer, body #content{
position:fixed;
}
}
</style>
</head>
<body>
<div id="header" class="sample-border"></div>
<div id="left-sidebar" class="sample-border"></div>
<div id="right-sidebar" class="sample-border"></div>
<div id="content" class="sample-border"><img src="/broken.gif" style="display: block; width: 3000px; height: 3000px;"/></div>
<div id="footer" class="sample-border"></div>
</body>
</html>