title: Grow a Relatively positioned Div with an Absolutely positioned inner Div
body: <ol>
  <li>I have a relatively positioned div with height and width set.</li>
  <li>Then I have an absolutely positioned div (inside #1) with top, width, height set.</li>
  </ol>
  
  <p>What I want is:</p>
  
  <ol>
  <li><p>If I add contents to inner div (Absolutely positioned), it should grow with the contents despite of its original height set. </p></li>
  <li><p>If the inner div expands then the outer div (relatively positioned) div should expand as well. </p></li>
  </ol>
  
  <p>Note: While there have been other answers on stackoveflow.com about removing the positioning from inner div. This can't work for me as I see.</p>
  
  <p>So an answer based on pure CSS (or Javascript if not possible by CSS at all) is what I'm looking for here without touching the positioning elements of the divs at all.</p>
  
  <p>A code snippet [Pardon me, I can't write such noisy CSS myself in the elements, it's my tool :/]. For the sake of clarity I'm posting the code as it is:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;New Project&lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
  &lt;/head&gt;
  &lt;body style="background-color: lightgray"&gt;
      &lt;div id="34ef9e8e-7d99-4690-8788-d2caf23cf33e" style="position: relative; clear: both; margin: 0 auto; top:5; left: 5; height: 300; width: 500; font-family: Arial; font-face: Arial; font-size: 12; font-weight: normal; font-style: normal; ; color:#000000; background-color:#ffffff"&gt;
          &lt;div id="f79e1b12-d4bb-433b-9e2c-33a3c1b2b89a" style="position: absolute; clear: both; border: 1px solid #000000; top:46; left: 97; height: 200; width: 300; font-family: Arial; font-face: Arial; font-size: 12; font-weight: normal; font-style: normal; ; color:#000000; background-color:#ffffff"&gt;
              &lt;div style=" background-color: #000000; color: #ffffff; line-height:24px; width: 100%; height: 24px"&gt;&lt;span style="padding-left: 2px"&gt;Title&lt;/span&gt;&lt;/div&gt;
              &lt;div style="position: relative;"&gt;
                  Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,&lt;br&gt;
                  Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,&lt;br&gt;
                  Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,&lt;br&gt;
                  Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,&lt;br&gt;
                  Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,&lt;br&gt;
                  Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,&lt;br&gt;
                  Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,&lt;br&gt;
                  Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,&lt;br&gt;
                  Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,&lt;br&gt;
                  Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,&lt;br&gt;
                  Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,&lt;br&gt;
                  Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,&lt;br&gt;
                  Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,&lt;br&gt;
                  Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,&lt;br&gt;
                  Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,&lt;br&gt;
                  Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,&lt;br&gt;
                  Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,Blah, Blah,&lt;br&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>