Widths and margins of absolutely positioned, non-replaced elements

If the (inside of the) left blue edge is 0, then the left red edge is 30px, the right red edge is 530px, and the right blue edge is 600px.

This paragraph (a0b0c0d0e0f0) should be ltr and have its left edge against the red container and its right edge against the blue one.

This paragraph (a1b0c0d0e0f0) should be rtl and have its left edge against the blue container and its right edge against the red one.

This paragraph (a0b1c0d0e0f0) should be 400px wide (excluding padding and border, 425px with it), ltr, and have its left edge even with the red container.

This paragraph (a1b1c0d0e0f0) should be 400px wide (excluding padding and border, 425px with it), rtl, and have its right edge even with the red container.

This paragraph (a0b0c1d0e0f0) should be ltr and touch the blue container on both sides.

This paragraph (a1b0c1d0e0f0) should be rtl and should touch the blue container on the left and the red container on the right.

This paragraph (a0b1c1d0e0f0) should be 400px wide (excluding padding and border, 425px with it), ltr, and touch the blue container on the left.

This paragraph (a1b1c1d0e0f0) should be 400px wide (excluding padding and border, 425px with it), rtl, and centered between the left blue edge and the right red edge.

This paragraph (a0b0c0d1e0f0) should be ltr and should touch the left red edge and the right blue edge.

This paragraph (a1b0c0d1e0f0) should be rtl and should touch both blue edges.

This paragraph (a0b1c0d1e0f0) should be 400px wide (excluding padding and border, 425px with it), ltr, and centered between the left red edge and the right blue edge.

This paragraph (a1b1c0d1e0f0) should be 400px wide (excluding padding and border, 425px with it), rtl, and should touch the right blue edge.

This paragraph (a0b0c1d1e0f0) should be ltr and should touch both blue edges.

This paragraph (a1b0c1d1e0f0) should be rtl and should touch both blue edges.

This paragraph (a0b1c1d1e0f0) should be 400px wide (excluding padding and border, 425px with it), ltr, and should be centered between the blue edges.

This paragraph (a1b1c1d1e0f0) should be 400px wide (excluding padding and border, 425px with it), rtl, and should be centered between the blue edges.

This paragraph (a0b0c0d0e1f0) should be ltr and should touch the left red edge and right blue edge.

This paragraph (a1b0c0d0e1f0) should be rtl and should touch the left blue edge and right red edge.

This paragraph (a0b1c0d0e1f0) should be 400px wide (excluding padding and border, 425px with it), ltr, and should touch the left red edge.

This paragraph (a1b1c0d0e1f0) should be 400px wide (excluding padding and border, 425px with it), rtl, and should touch the right red edge.

This paragraph (a0b0c1d0e1f0) should be ltr and should touch both blue edges.

This paragraph (a1b0c1d0e1f0) should be rtl and should touch the left blue edge and right red edge.

This paragraph (a0b1c1d0e1f0) should be 400px wide (excluding padding and border, 425px with it), ltr, and should touch the left blue edge.

This paragraph (a1b1c1d0e1f0) should be 400px wide (excluding padding and border, 425px with it), rtl, and should touch the left blue edge.

This paragraph (a0b0c0d1e1f0) should be ltr and should touch the left red edge and right blue edge.

This paragraph (a1b0c0d1e1f0) should be rtl and should touch both blue edges.

This paragraph (a0b1c0d1e1f0) should be 400px wide (excluding padding and border, 425px with it), be ltr, and should touch the left red edge.

This paragraph (a1b1c0d1e1f0) should be 400px wide (excluding padding and border, 425px with it), be rtl, and should touch the right blue edge.

This paragraph (a0b0c1d1e1f0) should be ltr and should touch both blue edges.

This paragraph (a1b0c1d1e1f0) should be rtl and should touch both blue edges.

This paragraph (a0b1c1d1e1f0) should be 400px wide (excluding padding and border, 425px with it), be ltr, and should touch the left blue edge.

This paragraph (a1b1c1d1e1f0) should be 400px wide (excluding padding and border, 425px with it), be rtl, and should touch the left blue edge.

This paragraph (a0b0c0d0e0f1) should be ltr and should touch the left red edge and right blue edge.

This paragraph (a1b0c0d0e0f1) should be rtl and should touch the left blue edge and right red edge.

This paragraph (a0b1c0d0e0f1) should be 400px wide (excluding padding and border, 425px with it), be ltr, and should touch the left red edge.

This paragraph (a1b1c0d0e0f1) should be 400px wide (excluding padding and border, 425px with it), be rtl, and touch the right red edge.

This paragraph (a0b0c1d0e0f1) should be ltr and touch both blue edges.

This paragraph (a1b0c1d0e0f1) should be rtl and touch the left blue edge and right red edge.

This paragraph (a0b1c1d0e0f1) should be 400px wide (excluding padding and border, 425px with it), be ltr, and should touch the left blue edge.

This paragraph (a1b1c1d0e0f1) should be 400px wide (excluding padding and border, 425px with it), be rtl, and should touch the left blue edge.

This paragraph (a0b0c0d1e0f1) should be ltr and touch the left red edge and right blue edge.

This paragraph (a1b0c0d1e0f1) should be rtl and touch both blue edges.

This paragraph (a0b1c0d1e0f1) should be 400px wide (excluding padding and border, 425px with it), be ltr, and touch the right blue edge.

This paragraph (a1b1c0d1e0f1) should be 400px wide (excluding padding and border, 425px with it), be rtl, and should touch the right blue edge.

This paragraph (a0b0c1d1e0f1) should be ltr and touch both blue edges.

This paragraph (a1b0c1d1e0f1) should be rtl and touch both blue edges.

This paragraph (a0b1c1d1e0f1) should be 400px wide (excluding padding and border, 425px with it), be ltr, and should touch the right blue edge.

This paragraph (a1b1c1d1e0f1) should be 400px wide (excluding padding and border, 425px with it), be ltr, and should touch the right blue edge.

This paragraph (a0b0c0d0e1f1) should be ltr and should touch the left red edge and right blue edge.

This paragraph (a1b0c0d0e1f1) should be rtl and should touch the left blue edge and right red edge.

This paragraph (a0b1c0d0e1f1) should be 400px wide (excluding padding and border, 425px with it), be ltr, and should touch the left red edge.

This paragraph (a1b1c0d0e1f1) should be 400px wide (excluding padding and border, 425px with it), be rtl, and should touch the right red edge.

This paragraph (a0b0c1d0e1f1) should be ltr and should touch both blue edges.

This paragraph (a1b0c1d0e1f1) should be rtl and should touch the left blue edge and right red edge.

This paragraph (a0b1c1d0e1f1) should be 400px wide (excluding padding and border, 425px with it), be ltr, and should touch the left blue edge.

This paragraph (a1b1c1d0e1f1) should be 400px wide (excluding padding and border, 425px with it), be rtl, and should touch the right red edge.

This paragraph (a0b0c0d1e1f1) should be ltr and should touch the left red edge and right blue edge.

This paragraph (a1b0c0d1e1f1) should be rtl and should touch both blue edges.

This paragraph (a0b1c0d1e1f1) should be 400px wide (excluding padding and border, 425px with it), be ltr, and should touch the right red edge.

This paragraph (a1b1c0d1e1f1) should be 400px wide (excluding padding and border, 425px with it), be rtl, and should touch the left blue edge.

This paragraph (a0b0c1d1e1f1) should be ltr and should touch both blue edges.

This paragraph (a1b0c1d1e1f1) should be rtl and should touch both blue edges.

This paragraph (a0b1c1d1e1f1) should be 400px wide (excluding padding and border, 425px with it), be ltr, and should touch the left blue edge.

This paragraph (a1b1c1d1e1f1) should be 400px wide (excluding padding and border, 425px with it), be rtl, and should touch the right blue edge.

If the (inside of the) left blue edge is 0, then the left red edge is 30px, the right red edge is 505px, and the right blue edge is 600px.

All of the following (paragraphs, not text within them) should be centered exactly within the red (inner) lines:

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This should be centered and ltr.

This should be centered and rtl.

This test is still being written...


Valid HTML 4.0!

(Back to CSS Testing Information, David Baron)

LDB, dbaron@dbaron.org