title: How to inherit height in div?
body: <p>I'm learning basic HTML 5 and CSS by myself, and I've been using <code>div</code> instead of <code>table</code> as recommended by many bloggers and web developers. But now I'm with this question:</p>
  
  <p>I'm trying to make a table looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/KNOxm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KNOxm.jpg" alt=""></a><br>
  <sub>(source: <a href="http://www.webdesign-gm.co.uk/images/blog/html5-structure.jpg" rel="nofollow noreferrer">webdesign-gm.co.uk</a>)</sub>  </p>
  
  <p>Using this code:</p>
  
  <p>CSS</p>
  
  <pre><code>.table {
  font-size:14px;
  border-style:solid;
  border-width:2px;
  margin:0;
  padding:3px;
  text-align:center;
  vertical-align:middle;
  display:table-cell;
  font-family:Verdana, Geneva, sans-serif;
  font-weight:bold;}
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div align="center"&gt;
  &lt;div id="row1"&gt;
      &lt;div class="table" style="min-width:500px;max-width:500px;"&gt;Random Number: &lt;?php echo $gRandNum; ?&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="row2" style="min-height:140px;"&gt;
      &lt;div id="row2column1" style="float:left;"&gt;
          &lt;div id="row2column1row1"&gt;
              &lt;div class="table" style="border-top-style:none;border-right-style:none;min-width:150px;"&gt;test1&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="row2column1row2"&gt;
              &lt;div class="table" style="border-top-style:none;border-right-style:none;min-width:150px;"&gt;test2&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="table" style="border-top-style:none;min-width:350px;"&gt;
          test3&lt;br&gt;test3&lt;br&gt;test3&lt;br&gt;test3&lt;br&gt;test3&lt;br&gt;test3
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="row3" style="width:500px;"&gt;
      &lt;div class="table" style="min-width:500px;max-width:500px;border-top-style:none;"&gt;teste&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><a href="http://jsfiddle.net/XxRJe/2/" rel="nofollow noreferrer">http://jsfiddle.net/XxRJe/2/</a>
  The row2 was supposed to have 2 columns inside of it. And the first column divided in another 2 rows, and each row would have 50% of the row2 height. But that is what is not happening. How do I fix it?
  Basically, I want two columns, and the first divided in 2 rows, but I have no idea on how to set it.</p>