title: Expanding parent div's height to fit floated & unfloated child divs
body: <p>I have a parent div <code>#modal_share</code> with a defined height of <code>400px</code>. I want it to extent its height to contain all its child divs when a new child div which is originally hidden, becomes visible.</p>
  
  <p><strong>Problem:</strong> Right now, when a hidden child div <code>.modal_error_msg</code> becomes visible, some divs below this newly visible div gets pushed outside its parent div. </p>
  
  <p>How can I make the parent div <code>#modal_share</code> expand its height to contain all the visible child divs?</p>
  
  <p><strong>JSFiddle:</strong> <a href="http://jsfiddle.net/TEmGc/" rel="nofollow">http://jsfiddle.net/TEmGc/</a></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#modal_share {
      width: 565px;
      height: 400px;
      position: relative;
      background: whiteSmoke;
      padding-top: 10px;      
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      -webkit-box-shadow: 0px 3px 16px #222;
      -moz-box-shadow: 0px 3px 16px #222;
      box-shadow: 0px 3px 16px #222;
      display: none;  
  }
  
  .modal_big_hline {
      width: 100%;
      height: 1px;
      margin-top: 25px;
      border-top: 1px solid #CCC;
      float: left;
  }
  
  .modal_error_msg {
      width: auto;
      height: 15px;
      padding: 15px 25px;
      margin: 0px 25px;
      font-size: 12px;
      color: #B79000;
      border: 1px solid #E7BD72;
      background: #FFF3A3;
      clear: both;
      display: none;
  }
  
  
  #modal_big_button_container {
      height: 14px;
      width: auto;
      margin: 10px 25px 0px 25px;
      clear: both;
  }
  </code></pre>
  
  <p><strong>HTML Structure</strong></p>
  
  <pre><code>&lt;div id="#modal_share"&gt;
      &lt;div class="modal_error_msg"&gt;&lt;/div&gt;
      &lt;div class="modal_big_hline"&gt;&lt;/div&gt;
      &lt;div id="modal_big_button_container"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>