Long description for change bar example

This diagram illustrates the use of absolute positioning to create a changebar effect. The changebar (represented by two hyphens in the image) appears in the 10px space to the left of the paragraph.

The illustration shows a vertical line that represents the left edge of the paragraph's containing block. The paragraph text (in black) is shifted 10px from this edge (shown in the diagram). The change bars (two red hyphens) appear to the left of the word "THIS", which begins the fourth line of text.

The following PRE element simulates the example. Vertical bars represent the left containing block edge.

|   I used two red hyphens to serve
|   as a change bar. They will "float"
|   to the left of the line containing
| --THIS word.

Return to image.

Hosted by uCoz