Containing blocks of absolutely positioned elements with block level positioned ancestors

Some normal text. (1)

The outside top and left edges of this paragraph's border should be 1em outside the outside edges of the containing div's border (so the inside edges of the green border line up with the outside edges of the purple border). This paragraph should have a 1em solid green border and 2em padding and the content (inside the padding) should be 10em tall and 20em wide.

Some more normal text. (2)
Some more normal text. (3)

The green top border of this paragraph should be 1em thick and 3em from the purple top border (also 1em thick) of the containing div. The green right border's outside edge should touch the inside edge of the purple right border. This paragraph should have 2em of padding on the top, 3em on the right, and 1em on the left. The content (inside the padding) should be 10em tall and 20em wide.

Some more normal text. (4)
Some more normal text. (5)

The outside edge of the green bottom border of this paragraph should protrude 2em outside the outside edge of the purple bottom border of its container. The green right border should exactly cover the purple right border. The padding of this paragraph should be 1em on top, 0 on the right, and 3em on the left. Inside that padding, the content should be 10em tall and 20em wide.

Some more normal text. (6)

The outside edge of the green bottom border of this paragraph should be 5em from the inside edge of the purple bottom border of the container. The outside edge of the green left border should be 3em from the inside edge of the purple left border. The padding of this paragraph should be 1em on top and 2em on the right and left. Inside that padding, the content should be 10em tall and 20em wide.

Some more normal text. (7)
Some normal text. (1)

The outside top edge of this paragraph's border should be 1em outside the outside edge of the containing div's border (so the inside edge of the green border lines up with the outside edge of the purple border). The outside edge of the left green border should be 2em into the left purple border, with 3em of the left purple border remaining beyond it. This paragraph should have a 1em solid green border and 2em padding and the content (inside the padding) should be 10em tall and 20em wide.

Some more normal text. (2)

The green top border of this paragraph should be 1em thick and 3em from the purple top border (also 1em thick) of the containing div. The green right border's outside edge should touch the inside edge of the purple right border. This paragraph should have 2em of padding on the top, 3em on the right, and 1em on the left. The content (inside the padding) should be 10em tall and 20em wide.

Some more normal text. (3)
Some more normal text. (4)

The inside edge of the green bottom border of this paragraph should be even with the outside edge of the purple bottom border of its container. The green right border's inside edge should be even with the inside edge of the 3em thick purple right border. The padding of this paragraph should be 1em on top, 0 on the right, and 3em on the left. Inside that padding, the content should be 10em tall and 20em wide.

Some more normal text. (5)

The outside edge of the green bottom border of this paragraph should be 5em from the inside edge of the purple bottom border of the container. The outside edge of the green left border should be 3em from the inside edge of the purple left border. The padding of this paragraph should be 1em on top and 2em on the right and left. Inside that padding, the content should be 10em tall and 20em wide.

Some more normal text. (6)

The border of this paragraph should be perfectly centered within its container, with 2em of yellow on all sides. The padding of this paragraph (aqua inside the green border, but with no content) should be 2em on top, 3em on the right, and 0 on the left. The content area of this paragraph should be 21em tall and 11em wide.


Valid HTML 4.0!

(Back to CSS Testing Information, David Baron)

LDB, dbaron@dbaron.org