title: Resizing parent div according to its child div
body: <p>I am very bad at CSS. I want to resize the parent div based on height of child div. Below is my html code.</p>
  
  <pre><code>&lt;div id="mainPanel" class="tabPanel"&gt;
       &lt;div class="ui-corner-all ui-widget-content grid_container" style="padding: 5px; margin: 5px; text-align: left;"&gt;
           &lt;div align="left"&gt;
              &lt;div id="subTabs" style="width:500px"&gt;
                 &lt;div class="ui-layout-content"&gt;
                    &lt;div id="Form1"&gt;
                     &lt;/div&gt;
  
                     &lt;div id="Form2"&gt;
                     &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt; 
  </code></pre>
  
  <p>Inside form1 and form2 div's I am dynamically populating components which may grow till any height. I tried with overflow:auto in all the parent div's , but no luck.  Any help will really appreciated.</p>