I thought this would proably be one of the 'standard' IE6 layout bugs, but after some searching, I can't see an obvious solution to it. Here's my test case:
http://game-point.net/misc/ie6Test/
The way I want it to look is how it looks in Firefox3, Safari, Opera, and IE8. The red rectangle overlaps the green one to the top right.
In IE6, however, 2 strange things happen. First, in the top box (where I don't specify the unfloated DIVs' widths), the green DIV doesn't clear, but its width does stop short of the floated DIV. This doesn't seem right; the floated DIV should surely be out of flow. There is also a curious 3-pixel gap between the green DIV and the floated DIV.
In the 2nd box, where I do specify the unfloated DIVs' widths, the unfloated DIVs clear the floated DIV even though I haven't set the 'clear' CSS attribute. Surely they shouldn't clear at all.
IE7 is very similar, except it doesn't have that curious 3px gap to the left of the floated DIV.
1) Is this my misusing CSS somehow, and what am I doing wrong? 2) If this is an IE6/IE7 bug, is it well-known, and is there a workaround?
OK, the problem seems to be explained rather expertly on this PositionIsEverything page. Looks like people just need to use a standards-compliant browser like IE8, Firefox, Opera, Safari, etc. if you want to use float layouts and get them to look right.