PDA

View Full Version : multi-column problem with IE



vw98034
07-07-2005, 06:57 PM
I have CSS as the following:



#Content {
margin:0px 210px 50px 10px;
padding:10px;
}

#RightCol {
position:absolute;
top:100px;
right:20px;
width:172px;
padding:10px;
background-color:#eee;
border:1px dashed #999;
line-height:17px;
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}

And in the html file:


<div id="Content">
<tiles:insert name="content"/>
</div>

<div id="RightCol">
<div id="Menu">
<tiles:insert name="menu"/>
</div>
</div>

I need to have three columns inside of the "content" region. Based on King Cosmonaut's article (http://www.kingcosmonaut.de/journal/3col-layout/), I have the followings:



<div id="left-col">

</div>
<div id="wrapper">
<div id="middle-col">

</div>
<div id="right-col">

</div>
</div>


and



div#left-col{
float: left;
width: 33%;
}

/* */
div#wrapper {
width:67%;
float: right;
}

div#middle-col{
float: left;
width: 33%;
}

div#right-col{
float: right;
width: 34%;
}


The page looks fine in FireFox, but the wrapper region is pushed down in IE(6.0). And if without the wrapper region, the right-col region is pushed down in IE. I guess the IE takes the percent of the page size, but not the region size.

How to deal with this issue?

Thanks for helps in advance.

v.