negative margin
Negative top and left margins move the element up and left while negative right and bottom margins make following siblings move left and up.
The yellow box is not shifted to the left, it is stretched.
When the margin value is set using percentage, it is calculated with respect to the width of the generated box’s containing block (which is true for ‘margin-top’ and ‘margin-bottom’ as well).
In IE6, the yellow box is clipped by its parent container. The fix is to style this box with zoom:1;position:relative.
Style the yellow box with:
position: absolute;