I'm sure I'm missing something obvious here...
http://www.burntscarlet.com/_test/help_forums/basec/equal_heights_css-table.html
There aren't any floats at work here, so I'm confused.
Have you tried splitting the right column into two cells?
CSS tables aren't very robust...I can't think of any particular reason to use them.
Failing that, try
vertical-align: top;
Here's how it display for me in Firefox and IE 9 on Windows 7:
http://burntscarlet.com/_test/help_forums/basec/EqualHeightColumns.png
The text should be at the top of both columns but it's obviously behaving as if there is floated content in the right column pushing things down.
See my second answer.
Definitely something to do with img attributes but I don't know what. Here's what it looks like if I place text on top of the right div column:
http://www.burntscarlet.com/_test/help_forums/basec/equal_heights_css-table_text-only.html
That's correct placement. But if the image is placed above any text in the right div then it pushes all other content down. WTF?
OK, I just saw your 2nd comment - YES, vertical-align: top; when placed in the left and middle columns works. But why? Those are block-level elements, right?
I'm sure I'm missing something obvious here...
http://www.burntscarlet.com/_test/help_forums/basec/equal_heights_css-table.html
There aren't any floats at work here, so I'm confused.
Have you tried splitting the right column into two cells?
CSS tables aren't very robust...I can't think of any particular reason to use them.
Failing that, try
Here's how it display for me in Firefox and IE 9 on Windows 7:
http://burntscarlet.com/_test/help_forums/basec/EqualHeightColumns.png
The text should be at the top of both columns but it's obviously behaving as if there is floated content in the right column pushing things down.
See my second answer.
Definitely something to do with img attributes but I don't know what. Here's what it looks like if I place text on top of the right div column:
http://www.burntscarlet.com/_test/help_forums/basec/equal_heights_css-table_text-only.html
That's correct placement. But if the image is placed above any text in the right div then it pushes all other content down. WTF?
OK, I just saw your 2nd comment - YES, vertical-align: top; when placed in the left and middle columns works. But why? Those are block-level elements, right?