RichInStyle.com test pages: boxes - block widths

Negative resultant 'width' test

The normal box model equation results in a negative width on this.

That shouldn't be rendered, but instead a minimum width, probably equal to the width of the widest word should be used.

Note with the above that the containing block has a width of 500 pixels, a red background and a border, whereas the left padding of the inner DIV is 600 pixels. As a result, none of the text should have the red background. In addition, the right border edge should be 100 pixels to the left of the left of the text.

Margin/width equivalency test

This has a margin-left of 50%.

This has a width of 50%.

This has a margin-right of 50%.

The three elements above should meet in the middle - there shouldn't be a pixel between them.

Margin/padding equivalency test

This has a padding-left of 50%.

This has a width of 50%.

This has a padding-right of 50%.

The three elements above should meet in the middle (thanks to text-align) - there shouldn't be a pixel between them. The background should only be behind the text (thanks to SPANs).

The two blocks of color above should meet in the middle - one has a right margin of 80%, the other a left margin of 20%.

Negative margin test

The following element has margin-right: -100% inside a margin-right: 50%, and hence its width should be the same as this.

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