astagl
02-13-2008, 11:08 PM
I'm going a bit mad trying to make this layout work for me, so I'm finally asking for help (I hate asking).
The layout I'm looking to accomplish is 3-column, non-liquid, centered... but here's the kicker. The left and right columns should not scroll, just the center content.
Here's what I have so far:
CSS:
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #363F77;
margin:0;
padding:0;
line-height: 1.5em;
background: #fff url(images/body_bg5.jpg) no-repeat top center;
background-attachment: fixed;
}
/* The hack for IE6 */
* html div#fixmeIE {
position: absolute;
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop : document.body.scrollTop);
}
/* For everyone else */
#fixme {
position: fixed;
top:0;
left:0;
}
#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
#contentwrapper{
float: left;
width: 100%;
}
/* the middle column */
#contentcolumn{
margin: 180px 270px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}
#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
}
#rightcolumn{
float: left;
margin-top: 180px;
width: 270px; /*Width of right column*/
margin-left: -270px; /*Set left margin to -(RightColumnWidth)*/
}
#footer{
clear: left;
width: 100%;
color: #FFF;
text-align: center;
padding: 4px 0;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
the HTML:
<body>
<div id="maincontainer">
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
middle
</div>
</div>
</div>
<div id="leftcolumn">
<div id="<?=$fixedstyle?>">
left
</div>
</div>
<div id="rightcolumn">
<div id="<?=$fixedstyle?>">
<div class="innertube">
right
</div>
</div>
</div>
<div id="footer"> </div>
</div>
</body>
There's a demo of this page here (http://www.staglicious.com/test/). If you view it in IE6, things seem to work, but all other browsers barf. Anyone have a helpful tip for me? I would really appreciate it!
The layout I'm looking to accomplish is 3-column, non-liquid, centered... but here's the kicker. The left and right columns should not scroll, just the center content.
Here's what I have so far:
CSS:
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #363F77;
margin:0;
padding:0;
line-height: 1.5em;
background: #fff url(images/body_bg5.jpg) no-repeat top center;
background-attachment: fixed;
}
/* The hack for IE6 */
* html div#fixmeIE {
position: absolute;
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop : document.body.scrollTop);
}
/* For everyone else */
#fixme {
position: fixed;
top:0;
left:0;
}
#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
#contentwrapper{
float: left;
width: 100%;
}
/* the middle column */
#contentcolumn{
margin: 180px 270px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}
#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
}
#rightcolumn{
float: left;
margin-top: 180px;
width: 270px; /*Width of right column*/
margin-left: -270px; /*Set left margin to -(RightColumnWidth)*/
}
#footer{
clear: left;
width: 100%;
color: #FFF;
text-align: center;
padding: 4px 0;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
the HTML:
<body>
<div id="maincontainer">
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
middle
</div>
</div>
</div>
<div id="leftcolumn">
<div id="<?=$fixedstyle?>">
left
</div>
</div>
<div id="rightcolumn">
<div id="<?=$fixedstyle?>">
<div class="innertube">
right
</div>
</div>
</div>
<div id="footer"> </div>
</div>
</body>
There's a demo of this page here (http://www.staglicious.com/test/). If you view it in IE6, things seem to work, but all other browsers barf. Anyone have a helpful tip for me? I would really appreciate it!