I'm having trouble using a table for laying out a page. I'm trying to get a cell that spans multiple rows and a cell in one of those rows to expand evenly while a cell in the other row it spans stays the same height.
This little hunk of HTML illustrates the problem. (As you might guess 72x72.gif is 72 by 72 pixels.)
The problem is (and I'm sure you've all heard this one before) that it looks good with Firefox but not with IE. IE ignores the HEIGHT attribute in the upper left <TD> and expands it instead of the lower left cell.
Is there a cross-browser way to designate the lower left cell as the one that should expand when the right hand one gets overly tall?
Could I just figure out the height of all the cells and hard code them? Yes, but...
I want to change the content of the A and B cells from week to week and I don't want to have to recalculate the height of each cell each time.
I want the user to be able to use larger or smaller fonts in the browser and still have the table work.
From reading previous threads in this forum, I see a lot of people suggesting CSS as the "obvious" alternative to tables for layout. I'm semi-good with CSS, but I don't see what it has that would help here. If anyone can mention the one CSS sub-subject I should go study up on, I'd be much obliged.
P.S. I'm testing with Firefox 1.0 and IE 6.0, both on XP.