title: Questions regarding CSS design using 960 grid system
body: <p>I'm using <a href="http://960.gs/" rel="nofollow noreferrer">960 grid system</a> to create a layout prototype.</p>
  
  <p>I would like to set the color between <em>Navigation</em> and <em>Content</em> to #000 (solid black), but I can't figure out how. What I currently get is:</p>
  
  <p><img src="https://imgur.com/1NM0Y.png" alt="alt text"></p>
  
  <p>Using this code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-type" content="text/html;charset=UTF-8" /&gt;
  &lt;link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" media="all" href="css/text.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" media="all" href="css/960.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" media="all" href="css/custom.css" /&gt;
  &lt;title&gt;The system&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container_16" id="base"&gt;
      &lt;div class="grid_16" id="header"&gt;Graphical banner&lt;/div&gt;
      &lt;div class="grid_16" id="logoutrow"&gt;Logout row&lt;/div&gt;
      &lt;div class="grid_3" id="navigation"&gt;Navigation&lt;/div&gt;
      &lt;div class="grid_13" id="content"&gt;Content&lt;/div&gt;
      &lt;div class="grid_16" id="footer"&gt;Footer&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My two questions:</p>
  
  <ul>
  <li><strong>How do I specify a color for all "in between" space like the one between Navigation and Content?</strong></li>
  <li><strong>My layout only looks like I want if if I don't use clear like in <a href="http://nettuts.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/" rel="nofollow noreferrer">this</a> tutorial. Why?</strong></li>
  </ul>
  
  <p>For the in between color I've tried putting this in custom.css without success:</p>
  
  <pre><code>div#base {
      background-color: #000;
  }
  </code></pre>
  
  <p>If you are unfamiliar with 960 grid system but still would like to try and help the whole 960.css can be found <a href="http://pastebin.com/f6e31aef1" rel="nofollow noreferrer">here</a>.</p>
  
  <hr>
  
  <p><strong>Both questions solved:</strong></p>
  
  <ul>
  <li>My second question is solved below in a post by Jan Aagaard. I didn't include the nbsp XML entity and had an empty div. It didn't work, at least not in Firefox 3.x.</li>
  </ul>
  
  <p>My current code looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-type" content="text/html;charset=UTF-8" /&gt;
  &lt;link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" media="all" href="css/text.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" media="all" href="css/960.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" media="all" href="css/custom.css" /&gt;
  &lt;title&gt;The system&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container_16" id="base"&gt;
      &lt;div class="grid_16" id="header"&gt;Graphical banner&lt;/div&gt;
      &lt;div class="clear"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;div class="grid_16" id="logoutrow"&gt;Logout row&lt;/div&gt;
      &lt;div class="clear"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;div class="grid_16" id="navigation-content&gt;
          &lt;div class="grid_3 alpha" id="navigation"&gt;Navigation&lt;/div&gt;
          &lt;div class="grid_13 omega" id="content"&gt;Content&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="clear"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;div class="grid_16" id="footer"&gt;Footer&lt;/div&gt;
      &lt;div class="clear"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The <a href="http://960.gs/" rel="nofollow noreferrer">960 grid system</a> says grid child nodes should follow certain rules. The first child node should have the <em>alpha</em> class and the last one the <em>omega</em> class. Which is what I'm doing above. It's the difference from the answer GateKiller gave below, which <em>apart from that</em> provided a solution.</p>