LAYOUT

LAYOUT currently only contains one fixed-width layout (the one used on this page), but more are planned:

• fixed_990.css - a 990px centred layout with a 5-column grid where each column is 190px wide.

Grids

To use a grid on your page use the following syntax:

<div class="grid clearfix">
	
	<div class="column">
		I am the first column!
	</div>

	<div class="column">
		I am the second column!
	</div>
	
	<div class="column">
		I am the third column!
	</div>

	<div class="column">
		I am the fourth column!
	</div>
	
	<div class="column last">
		I am the fifth, and last column!
	</div>

</div>

The above code would give you a 5-column grid where each column was 190px wide. The grid itself must be contained by an element 990px wide (this is done by #page if you take the standard layout).

You can also make columns span more than one column like this:

		
<div class="grid clearfix">
	
	<div class="column">
		I am the first column!
	</div>

	<div class="column span_two">
		I am the second column! I am wide!
	</div>
	
	<div class="column">
		I am the third column!
	</div>
	
	<div class="column last">
		I am the fourth, and last column!
	</div>

</div>

You can also put columns within columns - just remember to add the last class to the final column.

Examples

Examples of grid markup can be found here.

Column content width

This graphic illustrates how the layout widths are calculated:

Browser compatibility

These grids work across browsers as long as you use columns as containers - don't give them widths, or borders.

Float clearing

Grid columns are floated, so their container - .grid - must be properly cleared. Cross-browser float-clearing has always been problematic - so we use the .clearfix class that is defined in clearfix.css. You may pragmatically opt to use a <br clear="all" /> after your final column - especially if you use absolute positionining within your columns.

INTERFACE »