title: Why background on section element does not show (height 0)?
body: <p>i noticed that in the following example, note the classes, i am using 960gs in case the classes css interfered </p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;section id="main" class="container_12"&gt;
    &lt;div class="grid_12"&gt;
      &lt;article&gt;
      ...
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>header, footer, section, article, nav, aside { display: block; }
  #main { background: #fff; }
  </code></pre>
  
  <p>i noticed that <code>#main</code> has a <code>height</code> of 0 in firebug. also if i do a </p>
  
  <pre><code>#main .grid_12 { background: #fff; } 
  </code></pre>
  
  <p>it works </p>
  
  <p>i noticed that if i use a <code>div</code> instead of <code>section</code> the css works</p>
  
  <h1>UPDATE</h1>
  
  <p>turns out that its because of the <code>div.grid_12</code> or rather <code>div.grid_x</code> that causes the problem, if i remove that <code>&lt;div&gt;</code> it will work even if i am using <code>&lt;section&gt;</code></p>
  
  <pre><code>&lt;section id="main" class="container_12"&gt;
    &lt;div class="grid_10"&gt; &lt;!-- &lt;&lt;&lt; this div --&gt;
  </code></pre>