I built the HTML (substituting my own class names), assigning each div an arbitrary color so I could tell them apart. Then I started commenting pieces out to see how they affected the size of their containing div. With each step, I verified my understanding with Firefox. When I was done, I sent the final page to BrowerShots to see if IE6 had a problem with the layout or just the PNGs. Here's what FireFox had showed me:

Here's what the IE6 screenshot looked like:

I obviously couldn't experiment with BrowserShots, and I couldn't install IE6 because I run Linux. Luckily, my friend Don Chambers came to the rescue. With a IM and a little patience, we discovered that the HTML comments I had left in the page were messing up the display of the relative divs.

Just when you thought it couldn't get any worse: best practices mess up your layout.

I'm obviously not privy to IE6 source code, but looking at it from a programmer's point of view, I'd say that IE6 sets the comments to visibility:hidden to prevent their display, and the relatively positioned divs inherit the setting. But that's just a guess. I verified that removing the comments from the HTML repairs the layout.

If you have IE6 (upgrade if you can), you can see the IE6 comment bug example page and verify it for yourself. Feel free to download the file and abuse it any way you like.

This seems to be yet another IE6 bug (IE6 duplicate characters bug). The link below has a couple of work arounds for this issue.

http://www.positioniseverything.net/explorer/dup-characters.html

Either a css style property of display: inline; in the div preceding the comment, or applying this as a style for all floating divs seems to fix the issue. The other option is to use the <!--[if !IE]> syntax which is quite hideous IMO.

The addition of this CSS property actually takes care of a few buggy issues in IE6, so it is recommended to apply this to all floating divs instead of defining it each time before a comment occurs as I did above.

Actually, I got the same results with the outside container absolutely positioned, and with only one example. It's possible it's the same bug, though; perhaps IE uses the same code for relatively-positioned and floated elements.

I actually got this same bug while working on a three floated column layout. The layout uses no browser specific rules nor any positioning. The column layout consists of three left floated divs each proceeded and followed by an html comment. As soon as I removed the comments the extra characters magically went away. Off topic, anyone know a really easy way to make floats not wrap on window resize? Is it possible to get a pixel perfect three column (any)percentage width layout in IE6? Sorry for going off topic and thanks for the post!

E-Mail addresses will not be displayed and will only be used for E-Mail notifications.

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.Enter the string from the spam-prevention image above: