Direction of overflow, margins, floats

In the following test cases a 200px wide box contains a child of varying widths (the last one wider than the parent.)

1. The child has margin-left:auto, margin-right:0. When there is overflow (last case), according to CSS 2.1 10.3.3 margin-left is “treated as 0”, the “over-constrained” case is taken, so margin-right:0 is ignored. As a consequence the overflow should be on the right side. Gecko, Safari 3+, Opera, IE7+ agree.

100
150
300

2. The child has float:right. According to CSS 2.1 9.5.1, rule 1: the right outer edge of the float may not be to the right of the right edge of its containing block, so the overflow should be on the left side of the container. Gecko, Opera 9.5+ (not lower), Safari 4+ (not lower), IE8 agree. In IE7 the overflow is in the opposite (right) direction. In the added fourth case the float has a negative margin-left (-200px), with this all browsers agree on letting it overflow on the left side.

100
150
300
300

3. The child has margin-left:auto, margin-right:auto. When there is overflow (last case) according to CSS 2.1 10.3.3 margin-left and margin-right are “treated as 0”, the “over-constrained” case is taken, so margin-right is ignored. As a consequence the overflow should be on the right side. Gecko, Opera, IE7+, Safari agree.

100
150
300

The same cases as above, but with direction: rtl

1. margin-left auto

100
150
300

2. float right

100
150
300

3. margin-left, margin-right auto

100
150
300

CSS tests home