How do I make the left and right gutters different colors with 960.gs?

Question

How do I make the left and right gutters different colors with 960.gs? When I try something simple like:

<div style="background-color: green">
  <div class="container_16">
    <div class="grid_16">
      test
    </div>
  </div>
</div>
<div style="background-color: cyan">
  <div class="container_16">
    <div class="grid_16">
      test
    </div>
  </div>
</div>

The green and cyan colors are ignored. Seems like the "grid_16" class removes the color for some reason? My goal is being able to have different sections of the page in different colors all the way across the page, even past 960 pixels. So if someone makes their browser 1200px the left and right sides have the right color and the rest of the grid system is all contained within the 960 pixels in the middle.

I could add a background color to 'body' to do this for just 1 color, but I want multiple colors in the page. Like different colored horizontal stripes. Thanks.

Answer 1

Make a 1px high image with the left side one color and the right side the other color. Set it to repeat-y centered. You can make it as much 10,000 pixels wide on each side if you want, and due to gif compression it will still be a tiny file. Then you can still center the container div right in the middle of the page as normal.

Answer 2

Well, to understand the reason you need to understand how the grid layout works.

The thing is that when you tell the grid to be a certain width it also makes it floating. Which means that your outer divs have the height of 0px. So, in short. It doesn't remove the background colour, it just doesn't show it, because there is nothing to show (your grid is floating on top of it, so the actual size doesn't matter.

To solve it, just add a clearfix in the container and it should be solved. However, you also need to think about that the divs inherit the background colour per default.

  <div style="background-color: green">
    <div class="container_16 clearfix" style="background:white">
      <div class="grid_16">
        test
      </div>
    </div>
  </div>
  <div style="background-color: cyan">
    <div class="container_16 clearfix" style="background:white">
      <div class="grid_16">
        test
      </div>
    </div>
  </div>

Answer 3

Sticking two grid containers side-by-side is not a very smart way to produce horizontal stripes. If you want some containers to break past the grid's boundaries then adjust their margins appropriately, or put them behind (and outside) the grid entirely.