The 960 Grid Layout System (continued)

Here are some more remarks about the 960 system.

The class attribute on the div element is width and column or where the column begins. Note the example below. There is a wider gutter specified using one column, hence, <div ... class="grid_1" />, between the navigation thumb (leftmost column) and the content region of this two-column page. The page layout is:

+------------------+---------------------------------------------------------+
|                  |                                                         |
| navigation thumb |                  content region                         |
|                  |                                                         |
+------------------+---------------------------------------------------------+

<div class="container_12">
    <div id="navigation-thumb" class="grid_2">
        <img src="images/logo.png" />

        <p>
        This is a test of the Emergency Broadcast System. This is only a test. If
        it were a real emergency, you'd be told where to go.
        </p>
    </div>

    <div id="nav-content-gutter" class="grid_1" />

    <div id="content" class="grid_9">
        <p>
        This is page content.
        </p>
    </div>
</div>

Another, cooler system: 978

Check out the simpler 978 system which has certain advantages: 960 Grid System is Getting Old. Get more details by clicking on the guy's next article, The Simpler CSS Grid.

Click here for 978.css.