A guide to CSS Positioning

Absolute Positioning
Relative Positioning
Relative and Absolute Positioing
float Left and right
static positioning
Three column layout

1. Absolute Absolute positioning is absolute in relation to the parent element. In this case the parent element is the whole document, so the div is positioned absolutley at 0,0 and will apear in the top left corner.

2. Relative This positions the element relative to where it would have been in the document. Useful for moving something down or across a few pixels for example. In the diagram, the black dashed outline shows where the div would have been without positioning.

3. Relative and Absolute An example of absolute and relative positioning. The outer green box is positioned relative to where it would have been, whilst the inner box is positioned absolutely in relation to the parent green box.

4. float This is where the element in question "hovers" left or right, much like aligning an image left or right works in plain HTML.

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

5. Static This is the default (for all elements), and the box appears as if it had no positioning at all. Normally you wouldn't specify this.

6. 3 Column layout Here's where it gets fun. Below is a classic 3 column layout with the left and right DIV floated correspondingly left and right, and the middle DIV also floated left.

You could also do this with relative positioning (on the red box) and absolute positioning (on the columns) but it wouldn't be as "good" (not that it makes a difference really...).

Left

Right

Middle

If you want the source simply get it from this page. All the markup in question has ids of #box1 to #box_7c.