960 Grid System Dreamweaver Template

This template is based on the 960 grid system of web design. The template has twelve 50 pixel columns separated by 30 pixel gutters. See the content examples below for examples on how to use the 960 Grid System.

How the 960 Grid System Works

Using the 960 Grid System makes it easy to create custom web pages using common measurements and dimensions. The template's 12 column grid consists of the following columns:

The CSS classes are already included for creating any layout combination based on the above columns!

A 2-column Example

To create two equal columns the full width of the page, the HTML code is:

<div class="grid_6"> left column content </div>

<div class="grid_6"> right column content </div>

The above code with some additional content text will display as:

This is a heading

Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dolor neque, gravida sed tempus a, vehicula nec metus. Cras accumsan ultricies sapien id tincidunt. Etiam vitae ante quis lectus pulvinar

This is a heading

A Left Sidebar Example

To use a left sidebar and the majority of the right side of the page for content, use grids 3 and 9 or 4 and 8. See how the two content classes add up to 12? That's how the 960 Grid System works!

Class="grid_3"

Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Class="grid_9"

A Right Sidebar Example

If you want your page to use a right sidebar instead, reverse the order of the grid classes.

Class="grid_9"

Class="grid_3"

Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

A Three-Column Example

You can use as many divs as you want, as long as you don't exceed 12 columns across your page.

Class="grid_3"

Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Class="grid_7"

Class="grid_2"

Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

A Four-Column Example

Class="grid_3"

12 Column Grid

Below are show all the 12 columns and the possible 2-column combinations. View the source code for this page to see how the columns were created using the 960 Grid System.

930px

50px

850px

130px

770px

210px

690px

290px

610px

370px

530px

450px

530px

370px

610px

290px

690px

210px

770px

130px

850px

50px