Heights and margins of absolutely positioned, non-replaced elements

This paragraph should be 70px tall (80px including border) and should touch the top blue edge and thus be 65px from the bottom red edge.

This paragraph should touch both blue edges.

This paragraph should be 70px tall (80px including border) and should touch the top red edge (and thus be 30px from the bottom red edge.

This paragraph should touch the top red edge and bottom blue edge.

This paragraph should be 70px tall (80px including border) and should touch the top blue edge and thus be 65px from the bottom red edge.

This paragraph should touch both blue edges.

This paragraph should be 70px tall (80px including border) and should touch the top red edge.

This paragraph should touch the top red edge and bottom blue edge.

This paragraph should be 70px tall (80px including border) and should touch the bottom blue edge (and thus the inside of its top border should be even with the inside of the bottom red edge).

This paragraph should touch both blue edges.

This paragraph should be 70px tall (80px including border) and touch the bottom blue edge.

This paragraph should touch the top red edge and bottom blue edge.

This paragraph should be 70px tall (80px including border) and should touch the top blue edge.

This paragraph should touch both blue edges.

This paragraph should be 70px tall (80px including border) and should touch the top red edge.

This paragraph should touch the top red edge and bottom blue edge.

This paragraph should be 70px tall (80px including border) and should touch the top blue edge.

This paragraph should touch both blue edges.

This paragraph should be 70px tall (80px including border) and should touch the top red edge.

This paragraph should touch the top red edge and bottom blue edge.

This paragraph should be 70px tall (80px including border) and should touch the top blue edge.

This paragraph should touch both blue edges.

This paragraph should be 70px tall (80px including border) and should touch the top red edge.

This paragraph should touch the top red edge and bottom blue edge.

This paragraph should be 70px tall (80px including border) and should be centered vertically between the two blue edges (and thus its bottom border should overlap the bottom red border).

This paragraph should touch both blue edges.

This paragraph should be 70px tall (80px including border) and should be centered between the top red border and bottom blue border.

This paragraph should touch the top red edge and bottom blue edge.

This paragraph should be 70px tall (80px including border) and should touch the top blue edge.

This paragraph should touch both blue edges.

This paragraph should be 70px tall (80px including border) and should touch the top red edge.

This paragraph should touch the top red edge and bottom blue edge.

This test is still being written...


Valid HTML 4.0!

(Back to CSS Testing Information, David Baron)

LDB, dbaron@dbaron.org