title: CSS height auto is not working in relative DIV
body: <p>I have this code to show <code>absolute div</code> into <code>relative div</code>. </p>
  
  <p>html:</p>
  
  <pre><code>&lt;section&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;div class="relative"&gt;
                      &lt;div class="absolute"&gt;Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.&lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-12"&gt;
                 normal text added
              &lt;/div&gt;    
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.relative {
      position: relative;
      height:auto;
      background-color:#e1e1e1;
  }
  .absolute {
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: white;
      width: auto;
      background-color:#f5f5f5;
      margin:0 15px;
  }
  </code></pre>
  
  <p>In reality when I set <code>height:auto</code> for <code>relative div</code> this <code>div</code> is not showing. If I set any <code>height</code> value ie: <code>height:150px;</code> relative <code>div</code> it works and shows true. How do I fix this problem ?</p>
  
  <p>demo <a href="http://jsfiddle.net/4onnaoa2/1/" rel="nofollow">here</a>  </p>