Table cells of equal height using divs

[Thomas Mlynarczyk]

Hello!

I want a table-like layout (2 x 2 cells), but as it's not tabular data I
want to do it with divs and CSS. Here's what I have come up with so far
(using an HTML 4.01 Strict doctype):

div.table {position:relat ive; width:100%;}
div.row {clear:both; padding-top:2%;}
div.left {float:left;}
div.right {float:right;}
div.left, div.right {width:48%; background-color:yellow; border:1px solid
black;}
div.clear {clear: both;}

<div class="table">
<div class="row">
<div class="left">Ce ll 1<br>Second line</div>
<div class="right">C ell 2</div>
</div>
<div class="row">
<div class="left">Ce ll 3</div>
<div class="right">C ell 4</div>
</div>
<div class="clear"></div>
</div>

Basically, it works (tested on IE5, IE6, Mozilla and Opera), but there are
two things that I don'T like:

1) The horizontal and vertical gaps are in % and change with the browser
window's size. I would like to have them both equal and be something like
"5px".
2) I would like all cells in a row to be as high as the highest cell of the
respective row (the shorter cells increasing their "bottom padding" as
necessary).
3) I don't want to specify fixed widths or heights, but keep the layout
fluid. Also, this layout should work with older browsers like IE5.x.

Is there a way to achieve this?

Greetings,
Thomas