View our book on the Oxford University Press Website.

Read more

James C. McCroskey & Virginia P. Richmond Undergraduate Scholar's Conference

Read more

Check out our mascot Cali the Calculator.

Read more

Want to know more about what's on Jason Wrench's Mind? Check out his blog.

Read more

960 Grid System 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

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

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"

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

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"

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

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"

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

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"

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

Class="grid_3"

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

Class="grid_3"

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

Class="grid_3"

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

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

450px

 

530px

370px

 

610px

290px

 

690px

210px

 

770px

130px

 

850px

50px