Today I decided to use the 960 Grid System for an ad on my dad’s website. I used the 960 Grid System, and like usual, everything was working wonderfully until suddenly it wasn’t. However, unlike usual, I managed to fix the problem on my own, rather than finding a new template & starting over from scratch.

The ad ended up looking like this.  After a bit of tweaking, I discovered that the problem was being caused by the following lines of code:

.grid_4 {
background-color:#FFF;
border:#7D534E solid 1px;
padding:5px;
}

Removing the border & padding gave me this, which obviously isn’t a workable design.

After playing around some more, it became clear that the grids are sized exactly; even adding a simple 1 pixel border to your block will end up breaking your navigation.

The simplest solution that I found was to add another div tag inside the grid.  I called it liner, and added it to every grid_4 on the page. So this:

<div class=”grid_4″>
[content]
</div>

became this:

<div class=”grid_4″><div class=”liner” id=”coupon”>
[content]
</div></div>

From there, I simply moved the CSS from grid_4 to liner:

.liner {
background-color:#E9E4E1;
border:#7D534E solid 1px;
padding:8px;
height:295px;
}

I wanted the left box to have a dotted border, like a coupon:

#coupon {
border:#7D534E dashed 1px;
}

<div class=”grid_4″><div class=”liner” id=”coupon”>
[content]
</div></div>

And poof! No more spacing issues. Here’s the final product.