CSS:Layout

Introduction
Layout with styles has several advantages: The disadvantages are that:
 * Good for liquid layouts, that expand/contract depending on size of the monitor being used to view your page.
 * Allows you to modify a layout using a CSS for many pages that use the same "block" structure.
 * Tends to produce smaller files.
 * Conforms to current (and therefore future) standards
 * older browsers may or may not display the styles correctly if at all.
 * different browsers may not display the content in the same way.

Box Model
CSS treats every element as if it is surrounded by an invisible box.

In Firefox you can see a 3D visualisation of the box model if you Right click on page > Inspect element > 3D View (bottom right) then Drag = shows page divs layered

Reference [http://www.barelyfitz.com/screencast/html-training/css/positioning/ Learn CSS Positioning in Ten Steps. (2006) ]

Examples

 * 2013, March Overview of current cyber attacks (logged by 97 Sensors )
 * Resize the page in your web browser. Notice how the blocks shift logically.