A couple weeks back we have learned about the basics of the 960.gs CSS framework. Today we will talk about 2 problems with the 960 framework you might have struggled with. This post acted like a problem solver.

Many of these “problems” are very simple to solve. You will need a basic understanding of the framework though to understand why and how things get solved. You should learn the basics here.

Add padding

All the boxes in the framework have a specific width and margin and this creates the grid look and feel. However, sometimes you want to create a “box” or just want to add padding to your div.

As in any framework, this isn’t possible in the regular way. When you add padding to the div, the div will become wider and this will screw up your whole grid layout.

Solution

There is a simple solution to solve this problem. We will add another div inside the div you want to add padding to. We don’t give the new div any width declarations. So, we don’t give it a .grid_xx class.

Now, if we want to style this box and you have added a class or ID, we can add padding. Because we didn’t specific any width declaration, it is automatically 100%. If we add padding, the width of your div will stay the same. Take a look at our example to clear things up.

1

<div class="container_16"></div>

Let’s say we want to add padding to the div with ID “left”. Usually, like this:

1
2
3
4
5

div#left{
padding:10px;
}

However, this gives your div an extra 20px width. We work differently today:

1
2
3
4
5
6
7
8
9

<div class="container_16">
     <div id="left" class="grid_8">
          <div class="special-div">example</div>
     </div>
</div>

Together with this CSS:

1
2
3
4
5

div#left div.special-div{
padding:20px;
}

Take a look at our live example to see this works. As you can see, things are doing fine and the grid isn’t screwed up! I have added a border/background to the style declaration to make sure you can see what I mean

Tip! You can also do this with borders!

Wider or Narrower 960.gs Layouts

Width is a specific part of the 960.gs CSS framework. What if you want to create a layout that is wider or narrower? The facts first.

The 960.gs framework is called 960 for a reason: it’s 960px width. The whole grid is based on this 960px. You can’t make everything narrower or wider because everything gets screwed up. For a narrower layout however, we can use a trick. The wider layout isn’t possible with 960 gs and you should pick another framework like blueprint CSS.

Let’s create that narrow layout.

Solution

There are more CSS codes that can do the job, but I will just use the 960 way today.

Say we have this basic grid:

1
2
3
4
5

<div class="container_16">
     <div id="layout">layout</div>
</div>

This means that inside our basic “container” div, we have another div. This div with ID “layout” will be (surprise!) our layout. You see this div don’t have a .grid_xx class? Explanation will follow.

We have to put another div behind our “layout”-div, so we can position everything. I will give this div the class .grid_12. You can of course change this in an appropriate width. Our grid now looks like this:

1
2
3
4
5
6
7
8
9

<div class="container_16">
     <div class="grid_12">
          <div id="layout">layout</div>
     </div>
</div>

As you can see in the our HTML file, our container’s width “is” 16. Our container div’s width “is” 12.

Simple math shows that 16 – 12 is 4. We have the width of .grid_4 left. Because we need the same amount of space on both sides of our div, we can do some simple math again. We have .grid_4 / 2 sides = .grid_2 on both sides.

There are classes included in the 960 framework that can add a number of default padding like that .grid_1, .grid_2 etc. Padding-left is .prefix_xx and padding-right is .suffix_xx. Let’s add a padding-left of .grid_2 to our example.

1
2
3
4
5
6
7
8
9

<div class="container_16">
     <div class="grid_12 prefix_2">
          <div id="layout">layout</div>
     </div>
</div>

Check out our basic example to see that our grid is in the middle of your screen, and narrower as our original 960 layout.

Conclusion

These are the problems I was facing when using the 960.gs CSS framework. I don’t have other problems I think that should be tackled in 960.gs. It works good for me.

Perhaps you?

You might have a questions or problem you are facing when using 960 CSS framework in development environments. Don’t hesitate to point them out in the comments and I will see if I can add a solution in a follow-up post.