title: CSS display div below table
body: <p>I have side by side tables in a div container and then another div element that I want to display under the tables. At anytime the tables may have more rows than each other. How do I get the "Logs" div to always display below the table with the most rows?</p>
  
  <p><a href="http://jsfiddle.net/Tc2wA/10/" rel="nofollow noreferrer">http://jsfiddle.net/Tc2wA/10/</a></p>
  
  <pre><code>&lt;div id="table_container"&gt;
    &lt;table border="1" class="table_tpr"&gt;
      &lt;tr&gt;
        &lt;td width="10%"&gt;1&lt;/td&gt;
        &lt;td width="50%"&gt;12345678912345678912345679821345678941536321&lt;/td&gt;
        &lt;td width="20%"&gt;2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td width="10%"&gt;1&lt;/td&gt;
        &lt;td width="50%"&gt;12345678912345678912345679821345678941536321&lt;/td&gt;
        &lt;td width="20%"&gt;2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td width="10%"&gt;1&lt;/td&gt;
        &lt;td width="50%"&gt;12345678912345678912345679821345678941536321&lt;/td&gt;
        &lt;td width="20%"&gt;2&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;table border="1" class="table_loa"&gt;
      &lt;tr&gt;
        &lt;td&gt;1&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;div class="maintitle"&gt;Logs&lt;/div&gt;
  </code></pre>