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

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>