Example 1
Showing how certain properties affect the alignment and position of <div> tags within a layout. These examples use 3 <div> tags placed one after another on the page. When used in this way they stack up one underneath the other unless position properties are given. These examples are not recommendations on how to create a layout, they are here to illustrate alignment properties.
- Static positioning - no positional properties applied
- Margin - how a value applied to margin affects alignment
- Relative - relative positioning combined with a placement value
- Absolute - how absolute positioning can position a <div> tag independently of the main layout
Example 2
Using a wrapper <div> to contain the other <div> tags on the page. This method allows the possibility to create columns.
Example 3
Typical technique for achieving page layout with CSS. Makes use of a wrapper <div> tag.