IE6 layout problem with height

[MikeOS]

God am I fed up!!! I have a typical layout with a header, left column, and main content area. I had it working perfectly in multiple browsers until I tried IE6.

The problem is that when the main content area stretches beyond the fold the left column (in IE6) doesn't stretch with it. I've tried everything, I've searched the web and tried a million so called solutions and nothing works. I've tried setting the body to have a height of 100% and then the left div to the same but it only stretches the length of the window and not beyond the fold. I tried programmatically (JavaScript and ASP.NET) accessing the height property of the main div and then assigning it to the left div but no joy. I've moved divs around and nested them within a main div but still no joy. Please help, I'm really considering going back to tables, I never had this kind of headache with tables. So how do I get the height of the left div to stretch with the main content div when the main content goes beyond the fold?

Thanks

[cssGalactic]

Can you provide a sample of the code?

[MikeOS]

These are the divs:

<div id="header">
<div id="logo"></div>
<div id="utilities"><a href="contactus.aspx">Contact Us</a> | <a href="faqs.aspx">FAQ's</a> | <a href="privacypolicy.aspx">Privacy Policy</a></div>

<div id="datethemeselector"></div>
</div>
<div id="menu"><asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" StartingNodeOffset="0" />
<asp:Menu runat="server" ID="mainmenu" SkinID="mainmenuskin" DataSourceID="SiteMapDataSource1"></asp:Menu></div>
<div id="leftcol">
<div id="innerleftdiv"> <asp:Image ImageUrl="images/untitled-3.gif" runat="server" ID="promo" /></div>
<asp:contentplaceholder id="leftcontent" runat="server">
</asp:contentplaceholder>
</div>

<div id="maincol">
<div id="maininnercol"><p class="breadcrumb"><asp:Label runat="server" id="LocationText" cssclass="bdlabel">You Are Here: </asp:Label> <asp:SiteMapPath ID="SiteMapPath1" runat="server" /></p>

<asp:contentplaceholder id="maincontent" runat="server">

</asp:contentplaceholder>
</div>
<div id="footer">
<div id="innerfooter">
<p>Copyright &copy; stuffcupid.com <asp:Label id="year" runat="server" /></p>
</div>
</div>
</div>

<div id="rightcol">
<asp:contentplaceholder id="rightcontent" runat="server">

</asp:contentplaceholder>
</div>

And this is the relevant css:

#leftcol {position: absolute;
width: 15%;
padding-left: 5px;
top: 20%;
z-index: 1;
margin-left: -1%;}

#innerleftdiv {margin-left: 2px;
margin-top: 15px;}

#maincol {position: absolute;
top: 120px;
left: 18%;
width: 67%;
height: auto;}

#maininnercol {margin-left: 0%;
margin-right: 0%;}

#rightcol {position: absolute;
right: 0%;
width: 15%;
top: 0%;
margin-right: 0%;
height: 100%;
background-color: #6699ff;
z-index: 1;}

#footer {position: relative;
top: 8px;
padding-top: 8%;
padding-bottom: 5%;
height: 10%;
left: 18%;
width: 65%;
margin-left: 0.5%;
margin-right: 0.5%;}

#innerfooter {width: 96%;
Text-Align: center;}

[Centauri]

A link to the tempory site online would be better - we need to see the generated html, not the asp code.

I do see a lot of absolute positioning - very difficult to get elements affected by other elements with absolute positioning.

[MikeOS]

Unfortunately I don't have it up yet so I can't provide a link. To be honest from what I have been reading it seems that the type of layout I want isn't something CSS is very good at and that CSS is all about workarounds and hacks nowadays. Wasn't this technology suppose to be the answer to all our layout problems? I'm getting the impression it has lost its way. It has been a long time since I have done any CSS and I have to say I don't remember it being so difficult to do a simple layout. Thanks for your help anyway but I think I'll have to change the design to fit CSS rather than CSS fitting my design.

[Centauri]

Would this example help ?

[RGL]

I've been having the same trouble. The "Holly Grail" of CSS has turned out to be a holy nightmare. Don't get me wrong, I love the layout and I think it looks great but I want my content to stay set even when the window is reduced.

With the layouts I've seen recently they look good but only when at full screen at specific resolutions. Reduce the window a little and everything goes nuts. I hate it. Ahhhhhhh!

[renevanh]

I got the same problem.

My website (www.bangingsoundsofsilence.nl) is 100% CSS positioning, most of it relative.
Now it looks great in FireFox and even in IE7, but IE6 screws it up.

The menu isn't heigh enough, it's just the height of the text (in the content div), so when there's only a small content, half of the menu is shown.

I tried some fixes (including the "Holy Grail"), but the just don't help me out.

I'm at the point of making a script that shows an alert when the browser is IE6 or lower, but that's not very user friendly...

If anyone got a working solution... please let me (and others) know!

René

[RGL]

See this post.

I had to do some changing around but everything seems to be ok in Firefox and IE6.

[renevanh]

Thanks for the tip. The * hack did the work.

Now I'm just stuck with a stupid scrollbar in IE6, but that should be relatively easy to fix...

EDIT:
Height: 100% is giving me the scrollbar, height: 99% makes the scrollbar go away

René