I'm using 960.gs (http://960.gs) as a CSS framework for my site and I'm trying to colour in the background of the .container_12 classes rather than my .grid_12 classes for the extra 10px I get on each side, giving the grid a bit of whitespace to breathe.
I looked at the 960.gs example site and he has a background repeating on the y-axis and it seems to expand no matter how large or what is inside the .grid_12 or .grid_16 classes.
When I want to paint the background white (instead of have an image repeat on the y-axis), it appears as though my .grid_12 is floating and therefore .container_12 has no height and thus, no white background.
Here is my relevant HTML
<body>
<div id="logoContainer" class="container_12">
<div id="logo" class="grid_12">
<h1>Logo</h1>
</div> <!-- end #logo -->
</div> <!-- end #logoContainer -->
<div class="clear"></div>
<div id="menuContainer" class="container_12">
<div id="menu" class="grid_12">
<ul>
<li><a href="#" class="selected">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div> <!-- end #menu -->
</div> <!-- end #menuContainer -->
<div class="clear"></div>
<div id="contentContainer" class="container_12">
<div id="content" class="grid_12">
<p>Content here</p>
</div> <!-- end #content -->
</div> <!-- end #contentContainer -->
<div class="clear"></div>
</body>
and CSS
/* 960.gs */
@import url('reset.css');
@import url('960.css');
@import url('text.css');
#contentContainer
{
background-color: #fff;
margin-bottom: 10px;
border-radius: 20px;
-o-border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
To answer my own question, the
<div class="clear"></div>need to be after each .grid_, not each .container_