Image Gallery

The images here are sitting side by side becuase of the css 'float.' A css 'clear,' (applied to the 'text-line' class in the external style sheet) clears the float and causes the text to sit on the next line.

Second row

Third row

Fixed Positioning

here is an example of something with 'fixed' positioning

Relative Positioning

This is a heading with no position

This heading is moved left according to its normal position

This heading is moved right according to its normal position

Relative positioning moves an element RELATIVE to its original position. The content of a relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.

Absolute Positioning

This is a heading with an 'absolute' position

With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 850px from the top of the page.

Overlapping Positioning