Home/ Questions/Q 313387
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T08:06:12+00:00

I need some help with my design. I want to display three equal-height boxes

  • 0

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 3×3 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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0