title: Nested DIV tag overflows Parent DIV tag
body: <p>Having problem with the parent DIV tag being stationary, as noticed with background coloring.</p>
  
  CSS:
  
  <pre><code>div
  {
    postion:absolute;
  }
  ...
  #divBody
  {
      border: 1px solid red;
      left: 20%;
      right: 10%;
      top: 110px;
      width:70%; min-width: 150px;
      min-height: 200px;
      text-align: center;
      position: relative;
  }
  ...
  div .Registration
  {
      border: 1px solid black;
      background-color: red;
      text-align: center;
      width: 100%;
      height: 100%;
  }
  
  div .QA
  {
      background-color: black;
      width: 100%;
      height: 100%;
      text-align: left;
  }
  </code></pre>
  
  HTML:
  
  <p>root.master</p>
  
  <pre><code>  &lt;div id="divBody" runat="server"&gt;
      &lt;asp:ContentPlaceHolder ID="cphMain" runat="server" /&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>root.aspx</p>
  
  <pre><code>&lt;div id="divReg" style="visibility: visible;" class="Registration" runat="server"&gt;
    ...
  &lt;/div&gt;
  &lt;div id="divQA" style="visibility: hidden;" class="QA" runat="server"&gt;
    &lt;table id="tblContent" class="tblQA" runat="server" /&gt;
    ...
  &lt;/div&gt;
  </code></pre>
  
  <ul>
  <li>HTML Table object is only declared here as a placeholder, it is filled in the codebehind through data connectors and iterations.</li>
  </ul>
  
  Screen Capture:
  
  <p><img src="https://i.stack.imgur.com/jBvB5.png" alt="Child Div tag overflows Parent"></p>
  
  <h3>Question:</h3>
  
  <p>How do i get the parent DIV tag to expand with the child DIV tag?</p>