title: Two DIVs inside DIV. How to auto-fill the space of parent DIV by second DIV?
body: <p>Please visit <a href="http://jsfiddle.net/nirmand/HQwLG/">this fiddle</a> to see what I mean -</p>
  
  <p>I have a parent DIV, within that there are two DIVs placed in vertical order.
  The top DIV should have only the height of its content, whereas the bottom DIV should occupy all remain space of the parent DIV irrespective to content heights, and also shouldn't overlap the parent DIV.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="outer"&gt;
      &lt;div  class="inner-title"&gt;
          THIS IS MY TITLE
      &lt;/div&gt;
      &lt;div class="inner-content"&gt;
          CONTENT AREA
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html,body
  {
  height: 100%;
  }
  
  .outer
  {
      background-color:blue;
      height: 80%;
  }
  
  .inner-title
  {
      background-color:red;
  }
  
  .inner-content
  {
  background-color:yellow;
      height: auto;
  }
  </code></pre>
  
  <p>In short, "inner-content" should occupy all remaining space of "outer" DIV, without overlapping.</p>
  
  <p>Any idea of how to achieve this? </p>
  
  <p>Any help on this much appreciated.</p>