CSS2 Test Suite: 10.3.8 Computing widths and margins: absolutely positioned, replaced elements

[index page] [section] [Previous] [Next] [Specification]

The style declarations contained within this page:

div.contain {position: relative; width: auto;
   border: 2px dashed gray; color: gray; margin-bottom: 0.5em;}
div.contain * {color: black;}
div.contain img {position: absolute; top: 0; height: 15px;}
.cl1 {left: 0;}
.cl2 {left: auto;}
.cl3 {left: 25%; right: 25%; width: 50%;}
.cl4 {left: 25%; right: 25%; margin-left: auto; margin-right: auto; width: 25%;}
.cl5 {left: 0; right: 0; margin-left: 25%; margin-right: auto; width: 25%;}
.cl6 {left: 0; right: 0;}
.cl7 {left: 10px; right: 10px;}
.cl8 {left: 10px; right: -10px;}
.cl9 {left: 25%; right: 25%; margin-right: 25%; margin-left: 25%; width: 25%;}

[contain]

This paragraph contains an 'img' with a class of 'cl1' (test image) that should appear in the top left corner of the containing block, and have an intrinsic width (15 pixels).

[contain]

This paragraph contains an 'img' with a class of 'cl2' (test image) that should appear at the top of the containing block with its left edge aligned with the position it would have been if the 'img' had not been positioned, and have an intrinsic width (15 pixels).

[contain]

This paragraph contains an 'img' with a class of 'cl3' (test image) that should appear at the top of the containing block with a width half that of the containing block, and centered horizontally within the containing block.

[contain]

This paragraph contains an 'img' with a class of 'cl4' (test image) that should appear at the top of the containing block with a width one-quarter that of the containing block, and centered horizontally within the containing block.

[contain]

This paragraph contains an 'img' with a class of 'cl5' (test image) that should appear at the top of the containing block with a width one-quarter that of the containing block, and with its right edge lined up with the hoizontal midpoint of the containing block.

[contain]

This paragraph contains an 'img' with a class of 'cl6' (test image) that should appear in the top left corner of the containing block, and have an intrinsic width (15 pixels).

[contain]

This paragraph contains an 'img' with a class of 'cl7' (test image) that should appear near the top left corner of the containing block, with its left edge inset 10 pixels from the left edge of the containing block, and have an intrinsic width (15 pixels).

[contain]

This paragraph contains an 'img' with a class of 'cl8' (test image) that should appear near the top left corner of the containing block, with its left edge inset 10 pixels from the left edge of the containing block, and have an intrinsic width (15 pixels).

[contain]

This paragraph contains an 'img' with a class of 'cl9' (test image) that should appear at the top of the containing block with a width one-quarter that of the containing block, its left edge lined up with the horizontal midpoint of the containing block, and its right edge 25% inset from the right edge of the containing block.


[index page] [section] [Previous] [Next] [Specification]