Remember the rule of twelve. In order to create our site layout, all that’s required is that we feed the 960 System CSS page elements that add up to a total of twelve columns. We can use any combination we want; so long as they add up to twelve. The CSS will take care of the sizing and positioning for us, and once it as that total of twelve, knows to move on to the next row.

Have a look at our site, now laid out on a 12-column grid:


Our site will be made up of 7 <div> elements nested within our 960container <div>:
  1. Our header, made up of a single 12-column <div>
  2. A 4-column <div> section
  3. A 3-column <div> section
  4. A 3-column <div> section
  5. A footer, made up of a 7-column <div>
  6. Another footer, made up of a 3-column <div>
And there we have it. Six <div> elements in total, with each line adding up to a total of…

Not twelve. For you more astute readers, you again have perhaps assumed that I am teaching through error, something I have a natural astuteness myself for. But this is how we will be creating our layout, so something must give, right?

Not give, but push. In our next tutorial, we’ll be looking at how you create some space using the 960 Grid System. For right now, however, the system won’t freak out and break. The 7-column <div> that follows is too big to be placed on the second row anyway, so it gets pushed to the third row. However, had we added a <div> that was 1 or 2 columns wide, the 960 would have assumed that it went on the second row. So for the moment, we’re in the clear.

The 960 Grid System Syntax

At this point, you only need to make yourself aware of a couple of concepts. As you (hopefully) will recall, a group of elements may be called by a class name, which is specified as an attribute to that element. Several elements may be given the same class name, and as such, all of those elements will have styles applied to them.

This in essence is how the 960 Grid System works. By referring to an element by a particular class, you are able to style it in a certain manner. The miracle of the grid is that by simply giving it that class name, it attributes the correct width, and places it automatically. We’ll be taking a look at element placement with CSS later, but for the moment, consider yourself on holiday.

We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.

The Container (div)

As we did in our last tutorial, you first need to create a <div> that will house all of the other <div> elements that will call from the 960. There are two settings: One for the 16-column grid, and one for the 12-column grid.

The Content <div>

For each of your content elements, you will attribute a class that informs the 960 how many columns you would like that element to occupy. This takes the form of class=”grid_(# of columns)”. For example, if you would like to create a 6-column <div>, you would give it an attribute of class=”grid_6”.

Creating Our Party Layout

Now that you understand how 960 functions, it’s time to put it to work. Open up your HTML from the last tutorial, and append the following within the body of the document:
Code Block
Ask a Question
Download Source
Index.html
Layout divs.
<div id="layout_960" class="container_12"> 
 
    <div id="header" class="grid_12">
    THIS IS OUR HEADER
    </div>
 
    <div id="section1" class="grid_4">
    THIS IS OUR SECTION ONE
    </div>
 
    <div id="section2" class="grid_3">
    THIS IS OUR SECTION TWO
    </div>
 
    <div id="section3" class="grid_3">
    THIS IS OUR SECTION THREE
    </div>
 
    <div id="footer1" class="grid_7">
    THIS IS OUR FOOTER ONE
    </div>
 
    <div id="footer2" class="grid_3">
    THIS IS OUR FOOTER TWO
    </div>
 
</div>
Again, make sure the paths to the .CSS files are correct, and save your document. Open in your browser of choice, and you should see something like this:

It may not look like much yet, but the important thing to remember is that we’ve established our page skeletal, and it will readily start to take shape as with apply a variety of styles to it. But first: just a bit of 960 housekeeping…
CSS Grid Principals [3] Creating the 960 Divisions.zip

If you’re ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.