I use 960.gs (http://960.gs) as the CSS border for my site, and I try to color against the background of the .container_12 classes, and not my .grid_12 classes for the extra 10px I get on each side, giving the grid a bit spaces to breathe.
I looked at the example site 960.gs and it has a background that repeats along the y axis and it seems to expand no matter how big or what is inside the classes .grid_12 or .grid_16.
When I want to draw a white background (instead of repeating the image along the y axis), it looks like my .grid_12 is floating, and therefore .container_12 has no height and therefore does not have a white background.
Here is my relevant HTML
<body> <div id="logoContainer" class="container_12"> <div id="logo" class="grid_12"> <h1>Logo</h1> </div> </div> <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> </div> <div class="clear"></div> <div id="contentContainer" class="container_12"> <div id="content" class="grid_12"> <p>Content here</p> </div> </div> <div class="clear"></div> </body>
and CSS
@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; }
source share