Negative margins/indents bug in IE 5/6

I read someone else’s post about this bug last week, but I ignored it because it had never come up for me. Well, guess what? It’s a new week.

So here it is: if you try to apply a negative margin (and others report it happens with negative indents as well) to an element whose parent hasLayout, the element’s outer bits get cropped by the parent’s borders.

Eg.

1. The parent grey box has width:300 and float: left declared.

2. This paragraph has a left and right margin of -10px. You should be able to see the red border extend outside the grey box and read all of the text.

3. I include this to point out the importance of retaining the order of these three paragraphs.

In IE, the parts of the red-bordered paragraph beyond the grey box are cropped off.

1. This time, the parent grey background div has no width or float applied to it.

2. This paragraph has a left and right margin of -10px. You should be able to see the red border extend outside the grey box and read all of the text.

3. I include this to point out the importance of retaining the order of these three paragraphs.

This time, IE renders the red-bordered paragraph entirely (or would, if the grandparent column didn’t have layout, which it does, meaning the right edge of the paragraph gets cropped).

Peter-Paul Koch at Quirksmode.com noted:

IE 7 crops the right margin of the first example, but not the left. IE Mac ignores the margin-right: -10px in the first example.

Solutions, AFAIK:

1. Remove the hasLayout trigger for the parent (width, height, float, plus others). Not much of a solution when the reason you needed the negative margin in the first place probably had something to do with the parent’s dimensions and positioning.
2. *UPDATE*: If you don’t mind adding another div layer, you can use a grandparent element (between the great-grandparent and parent) and declare padding to give enough room around the negative margined child. However, this won’t work when there is another (aunt) element floated beside the parent. I’m still looking into all the possible rearrangements…
   

If anyone knows of a work around that preserves the element order, please shoot.

******UPDATE (2009.06.24):
Solution is here.