title: Why does my div have no height?
body: <p>I'm trying to mimic the row-column mechanism that twitter's bootstrap css framework uses.</p>
  
  <p>I have a div containing some other divs which themselves contain come content. In my element inspector, it shows the container as having no height. Shouldn't the height of the div be the height of the elements it contains?</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row yellow"&gt;
          &lt;div class="column-1 red"&gt;
              column-1
          &lt;/div&gt;
  
          &lt;div class="column-1 blue"&gt;
              column-1
          &lt;/div&gt;
  
          &lt;div class="column-1 green"&gt;
              column-1
          &lt;/div&gt;
  
          &lt;div class="column-1 orange"&gt;
              column-1
          &lt;/div&gt;
  
          &lt;div class="column-1 red"&gt;
              column-1
          &lt;/div&gt;
  
          &lt;div class="column-1 blue"&gt;
              column-1
          &lt;/div&gt;
  
          &lt;div class="column-1 green"&gt;
              column-1
          &lt;/div&gt;
  
          &lt;div class="column-1 orange"&gt;
              column-1
          &lt;/div&gt;
  
          &lt;div class="column-1 red"&gt;
              column-1
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is a jsfiddle:</p>
  
  <p><a href="http://jsfiddle.net/Hg25C/1/">HTML/CSS in question</a></p>