Relative Positioning - 1

If you have any comments to make regarding this test, e-mail ian@hixie.ch.

Prerequisites
Browsers that are subjected to this test should support the CSS1 and CSS2 positioning.

1. Moving Left

This is just an ordinary test paragraph. This is an ordinary test paragraph. Ain't nothing special about this paragraph. This is an ordinary test paragraph. This is an ordinary test paragraph. This is an ordinary test paragraph. This is an ordinary test paragraph. This is an ordinary test paragraph.

This paragraph should be moved so that the left edge touches the containing DIV's border, and on the right edge it should appear to have moved in a bit too. So in fact, the whole paragraph should just appear shifted to the left by 5em.

This should be in the same kind of position as the previous paragraph. This paragraph should be moved so that the left edge touches the containing DIV's border, and on the right edge it should appear to have moved in a bit too. So in fact, the whole paragraph should just appear shifted to the left by 5em.

This is yet another simple test paragraph. This is yet another simple test paragraph. This is yet another simple test paragraph. This is yet another simple test paragraph. This is yet another simple test paragraph. This is yet another simple test paragraph. This is yet another simple test paragraph.

2. Moving Right

This is just an ordinary test paragraph. This is an ordinary test paragraph. Ain't nothing special about this paragraph. This is an ordinary test paragraph. This is an ordinary test paragraph. This is an ordinary test paragraph. This is an ordinary test paragraph. This is an ordinary test paragraph.

This paragraph should be moved so that the right edge touches the containing DIV's border, and on the left edge it should appear to have moved in a bit too. So in fact, the whole paragraph should just appear shifted to the right by 5em.

The same thing should happen to this paragraph as to the previous one. This paragraph should be moved so that the right edge touches the containing DIV's border, and on the left edge it should appear to have moved in a bit too. So in fact, the whole paragraph should just appear shifted to the right by 5em.

This is yet another simple test paragraph. This is yet another simple test paragraph. This is yet another simple test paragraph. This is yet another simple test paragraph. This is yet another simple test paragraph. This is yet another simple test paragraph. This is yet another simple test paragraph.

Submit Results

How does your browser fare on this test?


Up to the Positioning Tests.

Up to the Evil Tests Page.

This page is maintained by Ian Hickson (ian@hixie.ch).

Last updated in February 1999.