The body has 120px horizontal margins, the green box is right floated, the red one left floated.

float
overflow:hidden

1a. The blue box has overflow:hidden

float
margin-left:100px; overflow:hidden

2a. The blue box has overflow:hidden and a positive left margin.

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

3a. The blue box has overflow:hidden and a negative left margin.

margin-left:-100px; overflow:hidden

4a. Like 3a, without the float

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

5a. Like 3a, without overflow:hidden

float
margin-left:-100px; overflow:hidden; width:300px

6a. Like 3a, with a width on the overflow box.

float
margin-left:-100px; display: table

7a. The blue box has display: table; and a negative left margin.

float
overflow:hidden;

1b. The blue box has overflow:hidden

float
margin-right:100px; overflow:hidden

2b. The blue box has overflow:hidden and a positive right margin.

float
margin-right:-100px; overflow:hidden

3b. The blue box has overflow:hidden and a negative right margin.

margin-right:-100px; overflow:hidden

4b. Like 3b, without the float

float
margin-right:-100px; overflow:visible

5b. Like 3b, without overflow:hidden

float
margin-right:-100px; margin-left: auto; overflow:hidden; width: 300px

6b. Like 3b, with a width on the overflow box.

float
margin-right:-100px; margin-left: auto; display: table

7b. The blue box has display: table; and a negative right margin.


Safari 4 is correct.

Opera 10.50 is almost correct, except in case 3b. Previous versions of Opera had more problems.

Firefox 3 (not 2) and IE8 (not 7) have a problem in cases 3a and 3b: they ignore the negative margin. In Firefox 3 this happens in 6a, 6b, 7a, 7b as well.

CSS tests home