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.
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.
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
1. margin-left auto
2. float right
3. margin-left, margin-right auto
CSS tests home