960gs: change the background color of particular columns

BlueDog

New Member
I'm using the 960 grid system for a site design and I'd like to be able to change the background color of particular columns. I've figured out how to change the background color of the entire container by doing something like\[code\].container_12 { background-color: #000000; overflow: hidden; /* so that the margin is transparent */}\[/code\]However, what if I want to change the background color of, say, just columns 1-3? I'd like the color to go all the way to the bottom of the container.Example. Let's say I have some html like:\[code\]<div class="container_12"> <div class="grid_4 alpha"> a </div> <div class="grid_4"> b </div> <div class="grid_4 omega"> c </div> <div class="grid_1 alpha"> A </div> <div class="grid_10"> B </div> <div class="grid_1 omega"> C </div></div>\[/code\]I want to style it so that columns 1-3 have a given background color. This would mean that the first three columns of the a div, the A div, and the first two columns of the B div would have this color. Basically I want to style columns, not grids. Is this possible?
 
Back
Top