Rounded corners in a css table-cell layout?

Question

I need some help with my design. I want to display three equal-height boxes next to each other, like this ASCI art:

+------+ +------+ +------+
|      | |      | |      |
|      | |      | |      |
|      | |      | |      |
+------+ +------+ +------+

I also have an example online (with all the CSS).

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:

<div class="box">
  <div class="box-header">
    <h4>header</h4>
  </div>
  <div class="box-body">
    <p>Contents</p>
  </div>
</div>

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.

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.

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?

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.

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.

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.

Any tips are greatly appreciated!

Solution 1

As per my comment above, I have decided to use CSS3 border-radius to solve my problem. Using the statements below it will show rounded borders on every browser except Internet Explorer. I don't care much about IE so IE users can simply look at straight corners.

.box {
    display: table-cell;
    width: 16em;
    padding: 1em 2em;
    background: #f6c75d url(gradient.png) repeat-x scroll top left;
    border: 3px solid #de9542;
    border-radius: 25px; /* Standard */
    -o-border-radius: 25px; /* Opera 10.x */
    -moz-border-radius: 25px; /* Mozilla/Firefox */
    -icab-border-radius: 25px; /* iCab */
    -khtml-border-radius: 25px; /* KHTML/Konqueror */
    -webkit-border-radius: 25px; /* Webkit/Safari/Chrome/etcetera */
}

In the above, gradient.png is a small tileable image that provides the gradient at the top of a box.

It works perfectly. It also simplifies the markup and the CSS, and it reduces the amount and the size of the background images that I need.

Solution 2

There is solution, which works in Safari, Firefox and Chrome. It does not work in IE, nor Opera (as far as I have tested it ― not even in 10.0b). It uses CSS3 property border-image. As it is still feature included in working draft, not recommendation, browsers implement it only with their specific prefixes:

#boxes {
    display: table;
    border-spacing: 1em;
}
.box-row { display: table-row; }
.box {
    width: 16em;
    display: table-cell;
    padding-right: 2em;
    border-image: url(box.png) 6 8 6 8 stretch; // this line actually does not influence rendering in any engine
    -o-border-image: url(box.png) 6 8 6 8 stretch;
    -khtml-border-image: url(box.png) 6 8 6 8 stretch;
    -icab-border-image: url(box.png) 6 8 6 8 stretch;
    -webkit-border-image: url(box.png) 6 8 6 8 stretch;
}

Using it would actually need you to recreate background image, but it's a detail.

Comments

[Sander Marechal]

That does not work unfortunately. I cannot set it on the box because I do not know how long they will be. Also, it's the box-body and not the box that I need to stretch. I have also tried setting min-height:100% on box-body but that has no effect. I guess min-height doesn't play well with CSS table display.

[Sander Marechal]

I cannot get your suggestion to work. When I set table-cell display on the inner wrap then the outer wrap breaks. Could you provide an example perhaps?

[Sander Marechal]

Thanks. That will indeed work. But if I'm going to use CSS3 properties I'm probably going to use border-radius instead (with a gradient background image). At least that will work on Opera too and it degrades relatively nicely in IE which would get a square box.

[Ricardo Gomes]

how important is it that your width is in em? if you could set a fixed width, this would be simple

[Sander Marechal]

I know it would be simple using fixed width.