960 Grid System Tutorial
Element Offsets
If you want to have an element starting a few grids in (rather than the first grid from the left), you can add to an element a class specifying the number of columns you want before the element prefix_XX.
<body>
<div class="container_16">
<div class="grid_13 prefix_2">
<p>Main content.</p>
</div>
</div>
</body>
In this case, the div would start 2 columns (100px) in from the left hand side of the container.
Clearing
When you want to make sure a new element appears below, you simply place an empty div as a “spacer” and give it the class of “clear”:
<body>
<div class="container_16">
<div class="grid_13">
<p>Main content.</p>
</div>
<div class="clear"></div>
<div class="grid_2 prefix_10">
<p>This element will always be below the previous elements.</p>
</div>
</div>
</body>
Grid Children
Often you will want to include elements within elements (nested divs). If you specify the size of these grids in the same way spacing will be wrong due to the way the margins are handled. This is countered adding the classes “alpha” and “omega” to the first and last nested elements respectively. This basically removes the left or right margins of those elements so that they are correctly aligned.
<body>
<div class="container_12">
<div class="grid_12">
<h1>Site Heading</h1>
</div>
<div class="clear"></div>
<div class="grid_3">
<h2>Menu</h2>
</div>
<div class="grid_9">
<h2>Page Content</h2>
<div class="grid_3 alpha">
<h3>Item 1</h3>
</div>
<div class="grid_3">
<h3>Item 2</h3>
</div>
<div class="grid_3 omega">
<h3>Item 3</h3>
</div>
</div>
<div class="clear"></div>
<div class="grid_12">
<p>footer text</p>
</div>
</div>
</body>
