A guide to CSS Positioning

1. Absolute Positioning
2. Relative Positioning
3. Relative and Absolute Positioing
4. float Left and right
5. static positioning
6. Three column layout
7. Fixed positioning

1. Absolute Absolute positioning is absolute in relation to the document (usually - see below). 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...).

7. Fixed positioning Fixed positioning means an object is fixed in relation to the window, and scrolling has no effect. An example of this is the Modal Dialog which is now part of RGraph. MSIE 8 only supports this if you use strict mode (ie you specify a doctype).

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

RGraph: HTML5 canvas graph library

If you're interested in web development, then you may also be interested in RGraph: HTML5 canvas graph library. It uses HTML5 features to produce a wide variety of graph types. Because it moves the creation of graphs from the server to the client, it can significantly reduce the load on your server and your bandwidth usage.