title: Div heights matching sub divs
body: <p>I've been trying to space out my divs so they slot in under each other on the page. The problem I'm having (as shown in image) is that I can't get the height of the div to be the same as the div children of it. In this example I have my "box1" and 2 "sub-boxes". The sub-boxes have the text inside but the main div which contains them doesn't have any height.</p>
  
  <p>This is an issue because when I try to add in divs underneath this one they just slot in at the same place as the top one.</p>
  
  <p><img src="https://i.stack.imgur.com/ghUEQ.png" alt="screenshot of issue"></p>
  
  <p>If my problem isn't clear please say and I'll try to elaborate</p>
  
  <p>Here is a quick snippet of HTML</p>
  
  <pre><code>&lt;div id="aboutus-box1"&gt;
  &lt;div id="aboutus-box1sub1"&gt;
      &lt;span id="subtitle"&gt;What is this site all about&lt;/span&gt;&lt;br/&gt;
      Information and details about the site, point put forwards to new users to look to the help page for support and to look at the &lt;a id="textlink"&gt;site rules&lt;/a&gt; TEXT FILLER ------------------------------------------- ----------------------------- ------------------ ------------------------- --------------------- --------------------------------- ----------------------- -------------------------- -------------------------------- ----- -------------------------------------- ----------------------------- ------------------------------------------ ------------------------------ ------------------------------------------------- -------------------------------------------------------- ------------------------------------------------ ----------------------------------------------------------------------- ------------------------------------
  &lt;/div&gt;
  &lt;div id="aboutus-box1sub2"&gt;
      &lt;span id="subtitle"&gt;Our History&lt;/span&gt;&lt;br/&gt;
      How the group came about, where different members came from, how the idea came about TEXT FILLER ------------------------------------------- ----------------------------- ------------------ ------------------------- --------------------- --------------------------------- ----------------------- -------------------------- -------------------------------- ----- -------------------------------------- ----------------------------- ------------------------------------------ ------------------------------ ------------------------------------------------- -------------------------------------------------------- ------------------------------------------------ ----------------------------------------------------------------------- ------------------------------------
  &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And some CSS</p>
  
  <pre><code>#aboutus-box1{
      width:100%;
      margin-bottom:1%;
      margin-top:1%;
      }
  #aboutus-box1sub1{
      height:100%;
      width:49.5%;
      float:left;
      }
  #aboutus-box1sub2{
      height:100%;
      width:49.5%;
      float:right;
      margin-left:1%
      }
  </code></pre>
  
  <p>Here's a <strong><a href="http://jsfiddle.net/FEkcr/" rel="nofollow noreferrer">JSFiddle Demo</a></strong></p>