title: Form Div height to expand with content
body: <p>I have a <code>div</code> with the following css properties</p>
  
  <pre><code>#maindiv {
     padding: 0px 30px 15px 30px;
     background-color: #fff;
     border-radius: 4px 0 0 0;
     border: solid 2px #ccc;
     min-height: 500px;
     height: auto;
     width: 100%; 
  }
  </code></pre>
  
  <p>I have a webgrid in this view. Unfortunately, the <code>#maindiv</code> does not expand to accomodate its content (the webgrid). How can I adjust the properties of he div to always expand to cover all its content?</p>
  
  <p><em><strong>EDIT:</em></strong><br>
  I have two inner divs the structures is</p>
  
  <pre><code>&lt;div id="maindiv"&gt;
     &lt;div class="container"&gt;
        &lt;div id="inner1"&gt;
          &lt;!-- my webgrid is contained here --&gt;
        &lt;/div&gt;
     &lt;div id="inner2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the other css are as follows:</p>
  
  <pre><code>.container{
     height: 100%;
     width: 100%;
  }
  
  #inner1 {
     height: 100%;
     width: 700px;
     float: left;
     border: 2px solid #000;
  }
  
  #inner2 {
     height: 100%;
     width: 200px;
     float: right;
     margin-right: 90px;
  }
  </code></pre>