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, Opera, IE7, Safari 3 (not 2) agree.

2. The child has float:right. When there is overflow (last case) the overflow is on the left side in Gecko and Opera 9.5 (not lower), on the right in Safari, IE7. 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(?). 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.

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.

The same cases as above, but with direction: rtl

CSS tests home