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 a series of columns with a "gutter" or padding on each side.

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.

grid_12

grid_1

grid_11

grid_2

grid_10

grid_3

grid_9

grid_4

grid_8

grid_5

grid_7

grid_6

grid_7

grid_5

grid_8

grid_4

grid_9

grid_3

grid_10

grid_2

grid_11

grid_1