title: CSS DIV as table - how to make all column same height as the highest
body: <p>I have some problems with my DIV table.. maybe there is a better way to do this. </p>
  
  <p>I want to have all columns to be the same height as the highest column. Is there a way to do it? or is there another way to make this work ?</p>
  
  <p>I have to made a jsfiddle example here with my code: <a href="http://jsfiddle.net/rb500o4L/" rel="nofollow noreferrer">http://jsfiddle.net/rb500o4L/</a> (right column is higher than left, middle and the logo column.)</p>
  
  <p>My CSS code:</p>
  
  <pre><code>div.round-border {
  border: solid 1px;
  border-color: #002F67;
  border-radius: 10px;
  }  
  
  #container {
  display: table;
  width: 100%;
  }
  
  #row  {
  display: table-row;
  }
  
  #cell {
  display: table-cell;
  }
  
  #cell-logo {
  display: table-cell;
  width: 200px;
  }
  </code></pre>
  
  <p>My HTML code:</p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div id="row"&gt;
  
  &lt;div id="cell"&gt;
      &lt;div class="round-border"&gt;
          &lt;h4&gt;Left Col&lt;/h4&gt;
          &lt;p&gt;...&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="cell"&gt;
      &lt;div class="round-border"&gt;      
          &lt;h4&gt;Middle Col&lt;/h4&gt;
          &lt;p&gt;...&lt;/p&gt;
      &lt;/div&gt;  
  &lt;/div&gt;
  
  &lt;div id="cell"&gt;
      &lt;div class="round-border"&gt;      
          &lt;h4&gt;Right Col&lt;/h4&gt;
          &lt;p&gt;...&lt;/p&gt;
          &lt;p&gt;...&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="cell-logo"&gt;
      &lt;div class="round-border"&gt;
          &lt;h4&gt;LOGO AREA&lt;/h4&gt;
          &lt;p&gt;...&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I appreciate any recommendation.</p>