HighDots Forums  

Table cells of equal height using divs

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss Table cells of equal height using divs in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
Thomas Mlynarczyk
 
Posts: n/a

Default 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





Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.