replicating tables with CSS and Divs

Hi,

I have been told that using tables for layout is no longer advised, due to
accessibility considerations. Instead of tables, I should be using DIVs.

However, I was wondering how can I replicate the behaviour of various cells
on the same row, increasing in height at the same time and taking the height
of the biggest one.

I have three "cells":

+------------+ +---------------+ +--------------+

| | | |

| | | |

+------------+ +---------------+ +--------------+

I don't want one of the cell becoming higher than the other two when more
content is inserted:

+------------+ +---------------+ +--------------+

| | | |

| | | |

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

Thanks!

Tom

On Sun, 22 Aug 2004 15:39:00 +0100, Tom <Tom (AT) nospam (DOT) com> wrote:

I have been told that using tables for layout is no longer advised, due
to
accessibility considerations. Instead of tables, I should be using DIVs.

Yes, but if the content is tabular - if each row and each column groups
and compares similar data - then table markup is fine, even appropriate.

However, I was wondering how can I replicate the behaviour of various
cells
on the same row, increasing in height at the same time and taking the
height
of the biggest one.

This gets a little tricky. You're expecting a div to size itself based on
a sibling div's content, which isn't how CSS works. Technically, this is
impossible. We'd need some way of asking the browser which of the 3
columns is rendered as tallest, and then going back and resetting the two
smaller heights to the larger value.

Here's a workaround, which unfortunately requires pixel-fixed widths. Use
a background image in the CSS for a container div which holds all 3 divs.
This image is 1 pixel high and as wide as all 3 columns, like this:
===+++=== Set it to repeat-y. It should continue to the bottom of the
parent div like so:

===+++===
===+++===
===+++===
===+++===
===+++===

.... giving the illusion of columns. (Be sure to include in the HTML some
real content within the container div but after the floated columns - use
a div set to clear. <div class="clear">&nbsp;</div> is what I usually use.

Another option allows for more flexibility in widths but relies on the
center column being the longest if there is a longest one. Here, use the
left and right borders of the center column as background foir the left
and right column, which are positioned over the borders, again creating
the illusion of columns.

Though, if this effect is required for usability, rather than simply
desired, the data might in fact be in such a relationship that it would
indeed be table data. In that case table markup would be appropriate for
these 3 columns.

Followups set to alt.html.