How to make a liquid table cell with HTML and CSS

Factual Questions
1

I’ve been working at this for the entire day and I cannot find any solution. Maybe someone here can clear this up.

I’m trying to do part of a page. I am using table layout since CSS has utterly failed me in the last few days.

The problem at hand is the following table:

http://www.parle.ee/diagram.gif

The green parts are fixed X and Y. The blue part is fixed X and varies Y.

And the red part is also fixed X but needs to strech to fill all the available space vertically. The goal is to make sure both columns are the same height.

The left column itself is a 1x3 table. Things worked even less when it was all part of one table.
So far, I have been able to get it as I want it when I use the HTML 3.2 doctype. This is quite a price to pay.

If I use 4.2 or XHTML, the stretchable cell is simply not shown and the inner table is a lot shorter. If I make it all one table, the left column disappears entirely.
I really would like to have a solution to this using XHTML and CSS or, at the very least 4.2. Any ideas? I’ll continue following the tiral and error and cursing path meanwhile.

2

A bit more info. It appears that some text inside the cells helps the browser render it better. I now get this:

http://www.parle.ee/2.gif

The green ones are supposed to be 30x30 pixels and the red one is set to height: auto. Instead, it seems to stretch the whole left column to size…

3

CSS equal height columns.

4

Something tells me you’re doing something wrong in your table layout if parts simply disappear depending on doctype… But no matter, since as Duckster implied you should give up your table stuff and go for CSS.

What you’re looking to do, based on those sweet GIFs you’ve drawn up, really isn’t that difficult with a completely CSS-based layout. I’d give it another look… you’ll be glad you did.