Questions regarding CSS design using 960 grid system

Answer 1

The best way to do this would be to wrap #navigation and #contents inside a container div like so:

<div class="container_16" id="base">
    <div class="grid_16" id="header">Graphical banner</div>
    <div class="grid_16" id="logoutrow">Logout row</div>
    <div class="grid_16" id="navigation-content">
     <div class="grid_3" id="navigation">Navigation</div>
     <div class="grid_13" id="content">Content</div>
 </div>
    <div class="grid_16" id="footer">Footer</div>
</div>

You could then set the background as so:

#navigation-content {
    background: #000
}

You only really need the clearing div if the you do not use the full 16 grids or if you using any float rules which need clearning. The author has the following to say on the clear:

Lastly, I wanted to talk about the clearing methods included in the 960.css. First off is my personal preference, adding an innocuous bit of markup to clear all elements. I have already written about it extensively, so I won’t go over all that again. Basically, add class="clear" to a <span> or <div> that you want to disappear. The only effect it will have is to clear floats.

The other method is for all you markup purists out there, who don’t want to dirty your HTML. Instead, you can insert markup via your CSS. This technique is well documented already as well. Essentially, add class="clearfix" to elements to clear what comes after them.

Answer 2

Do this .

<div class="container_16" id="base" style="background:#000">

Answer 3

Answers to second question: <div class="clear">&nbsp;</div> adds an element with the following styles to your page. It's basically an empty element that doesn't allow any elements to it's left or right, effectivly forcing content before and after it, to be on separate lines. It might not be needed for all browsers.

{
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

Instead of the clear element you can use the clearfix class. Add it to your contianer element like this:

<div class="container_16 clearfix" id="base">

This way you can avoid the empty elements, but I think this solution less compatible with different browsers.

Answer 4

They are all floated so I'm guessing the #base container isn't expanding to contain them. Try adding overflow: hidden; to your #base div to make it contain floated child elements - thus allowing you to see the background colour you have applied to it.