title: Rounded corners in a css table-cell layout?
body: <p>I need some help with my design. I want to display three equal-height
  boxes next to each other, like this ASCI art:</p>
  
  <pre><code>+------+ +------+ +------+
  |      | |      | |      |
  |      | |      | |      |
  |      | |      | |      |
  +------+ +------+ +------+
  </code></pre>
  
  <p>I also have <a href="http://www.jejik.com/sander/temp/boxes/boxes.html" rel="noreferrer">an example online (with all the CSS)</a>.</p>
  
  <p>The contents of the boxes varies in height. The tricky thing is that
  these boxes also need to have rounded corners. For that I am using the
  "sliding doors" technique. Basically, the markup of a box is something
  like this:</p>
  
  <pre><code>&lt;div class="box"&gt;
    &lt;div class="box-header"&gt;
      &lt;h4&gt;header&lt;/h4&gt;
    &lt;/div&gt;
    &lt;div class="box-body"&gt;
      &lt;p&gt;Contents&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Four block elements so I can make rounded corners and borders with
  background images. The top-right corner goes on the h4. The top left
  corner goes on the box-header. The bottom-right corner goes on the outer
  box div and the bottom-left corner goes on the box-body.</p>
  
  <p>I am using CSS display:table-cell to make all three boxes of equal
  height, but here my problem starts. All the box elements are now of
  equal height, but the box-body elements are not of equal height because
  the contents are not of equal height. Result: The bottom-right corners
  are not in the correct position. See also the link I posted.</p>
  
  <p>How can I fix that? All the box divs are equal in height now. I would
  like box-body to expand to use all available height, even when the
  content is short. I tried height:100% but that doesn't work. How can I
  make that work?</p>
  
  <p>Or is there an alternative way to achieve what I want? I cannot use
  something like faux-columns because I define the width of the boxes in
  ems. That means I cannot give the box div a single background image that
  provides both bottom corners.</p>
  
  <p>Google is being absolutely useless here. Any query involving "corners"
  and "table" just gives me a gazillion links to 1990's tutorials that use
  a 3x3 table for rounded corners.</p>
  
  <p>As for browser compatibility, it would be nice if IE7/8 can deal with it too but it's not required (I can replace with unequal-height floats in that case). For the website I am developing I estimate IE market share to be 20% or less. I don't care about IE6 at all.</p>
  
  <p>Any tips are greatly appreciated!</p>