Table cells of equal height using divs -
07-12-2004
, 03:18 PM
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:relative; 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">Cell 1<br>Second line</div>
<div class="right">Cell 2</div>
</div>
<div class="row">
<div class="left">Cell 3</div>
<div class="right">Cell 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 |