960 Grid System
The 960 Grid System is a CSS Framework.
A Framework is a system used to solve common problems. A common problem in developing websites is getting elements to align vertically, and consistant layouts between all major browsers. A grid system is typically used in a print layout format to ensure that elements vertically align on the page. The 960 GS performs the same function. This is the advantage of using a Framework. The disadvantage is you have to follow their guide lines, and can rarely, if ever, deviate from them if you want the system to work.
The 960 GS uses classes to specify the widths of each element. It also uses a reset file to ensure that it is correct across multiple browsers, and a font CSS file which sets the fonts for all tags.
When developing with any framework, it is important for you to layout the design on paper first, knowing how the columns should line up.
Specifying how many columns
Grids can be laid out out in columns of 12, 16, or 24, using the container_XX where XX is the number of columns you want to use.
<div class="container_12" id="outerContainer">
<!-- additional elements go here -->
</div>
Usually the columns themselves are too small to use individually. So normally, we use a combination. This is specified as grid_XX where XX is the number of columns to combine into one. You can combine multiple divs together till they add up to the number of columns you picked for your layout.
<div class="grid_4">
<!-- contents for this column go here --> </div>
If you want to have some extra space at the beginning of end of a column, you can use the prefix_XX or suffix_XX classes on a container.
If you want to clear a line and start a new row, use the built in clear class.
<div class="clear"> </div>