Tutorials Bugs Masterclass Free stuff Test pages Proposals

Core tests

Advanced tests

This test

RichInStyle.com test pages: boxes - block widths

Overflow test

There follows a DIV of width: 50%; border-right-width: 10px; border-left-width: 0; border-top-width: 0; border-bottom-width: 0; border-style: solid; background: red. Inside it is a DIV of width: 200%, which should overflow the right border of it. Half the width should be red, a small amount black, and the remainder white (background).

a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z

As an additional means of comparison, here's the same thing again with backgrounds. This background and that should be precisely lined up (note also that no border or red should be visible).

a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z

This example is almost the same, except in this case there is margin-right: 50% on the containing DIV, which should mean that the width will be quite a bit less - the width will be 50% - 10px (the width of the border). As a result, in this case the edges won't be lined up - the alphabet DIV will be less wide.

a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z