float
margin-left:-200px; overflow:auto;

The body has a -200px left margin, the green box is right floated, the blue one has a -200px left margin and overflow:auto. The blue box establishes a new block formatting context, its width should be limited by the float. Safari and IE7 are correct.

In Opera 9 the blue box is 200px shorter: it seems that the width is computed before applying the negative left margin. In Opera 9.5-10.10 the width of the blue box is correct, but it is displayed below the float as if it cleared the float. The move down (clear the float) effect is probably not wrong, but not necessary, moreover in that case there is no reason to have the width limited by the float, so the box should extend till the body edge. The problem is fully fixed in Opera 10.50

IE8 and Fx3+ seem to ignore the negative left margin, see Firefox 3+ and IE8 problem with negative margin on a block formatting context root next to a float

float
margin-left:-200px; overflow:hidden;

Same problem in Opera 9-10.10 with overflow:hidden.

float
margin-left:0; overflow:auto;

No problems in Opera without negative left margin.

float
margin-left:-200px; overflow:visible;

No problems in Opera with overflow:visible.

float
margin-left:-200px; display:table; blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

With display: table (filled with content to counteract the shrink-wrap effect). No width problem in Opera 9, but still the clearing effect in Opera 9.5-10.10

CSS tests home