[dtriska]

So, I'm fixing all of the rendering bugs that inevitably show up in IE, but I can't seem to fix the last one. In a nutshell, I have a container div with relatively positioned divs inside for content.

Within the container div, I have an absolutely positioned div running down the side of the relatively positioned divs. The absolutely positioned div has a height of 100%, which renders properly in standards-compliant browsers (the absolute div has a height of 100% of the height of the container div, so that it runs alongside all of the content divs).

Well, in IE6, the absolute div is, instead, given a height of 100% of the viewport, which leaves empty space alongside the content divs if they run below the line.

How can I get IE6 to size the absolute div to 100% of its parent block, the container div? I'd rather not resort to fixed positioning quite yet.

[Oisín]

The only way that I know how to do that in IE6 is to make the containing div relatively positioned, and the ‘inside’ div absolutely positioned. In other words, if you specify relative positioning for your container div, it should work in IE6 as well. Note the “should”.

[dtriska]

Yeah, the container div is already relatively positioned.

The weird thing is that in IE5, the absolutely positioned div is correctly rendered with a height of 100% of the container div. But not in IE6.

If it matters, I'm using HTML 4 Strict. My pages validate, and the dtd does trigger IE6's standards rendering mode.

Thanks for your help.

[dtriska]

Okay, this is odd. Even though Microsoft states that min-height works only in tables, applying "min-height: 100%" to the absolutely positioned div gets IE6 to correctly render the div with a height of 100% of the container div.

And, no, I'm not using tables.

Whatever, eh?