Layout with 2 variable-height columns

Question

I'm trying to create the following 2-column layout in my webpage:

+-------+---+
|       |   |
|       |   |
|   A   | B |
|       |   |
|       |   |
|       |   |
|       +---+
|       |   |
|       | C |
|       |   |
+-------+---+

With the following characteristics:

1. Both the left and the right columns have a fixed width.
2. The content of C is fixed, so C has a fixed height.
3. The amount of content in A and B can vary (the end user provides this), and therefore the required minimum height for A and B can vary.
4. If A requires more height than B and C combined, then B's height should be stretched so that it keeps touching C, and C's bottom aligns with A's bottom.
5. If A requires less height than B and C combined, then A should be stretched so that the bottom of A and C align.
6. A and B have a distinct border and/or background color, so I can't cheat by not stretching one of them (and C doesn't need stretching).

I tried doing this by representing each cell with a div and using jQuery's document ready event to adjust the cells to the appropriate heights, depending on which column is the tallest.
Most of the time, this works. However, because A contains an embedded YouTube video, and C contains an embedded Google Maps section, there is a lot of dynamic content adjusting going on, and this sometimes causes my javascript code to work with the wrong height values and mess up the layout process.
Also, it looks rather ugly when you see the content cells being stretched to their correct height, even though I could live with this if it worked consistently.

As an alternative, I tried using a table for this layout, since they have the "keep all columns equally high" behaviour built-in.
The problem with this approach is that I have to use "td rowspan=2" for A, and once I do, IE and Chrome ignore any fixed height that I specify on C but instead makes C way too high.

So basically I'm completely stuck on how to implement this (seemingly simple) layout. Can anyone point me in the right direction?

I'm targetting Chrome, FireFox and IE7+, but in IE7 and IE8 a reasonable approximation of the desired layout is acceptable.

Answer 1

Okay, I'm at work so I this is the best I could do for now but it works beautifully on IE7.

Some words before hand. For this solution, I have used tables. Now there is nothing wrong with using tables - when you use it for tabular data OR in rare circumstances like this. In this case, it must be employed to solve this using basic css. The only other way would be to use technologies (advanced CSS) that might alienate some users - ultimately, it is up to you to decide if you use something that might not work in everyone's browser. I sure wouldn't be able to view your website properly if you used CSS3+ because I'm stuck on IE7 right now.

I tested this on IE7 and works like a charm. As you see, it is not very code heavy either.

HTML

<div id="cols">
<table>
    <tbody>
        <tr>
            <td class="left"">A Box</td>
            <td class="right">
                <div>B Box</div>
                <div>C Box</div>
            </td>
        </tr>
    </tbody>
</table>
</div>

CSS:

#cols table td {
    width: 250px;
}
#cols table td.left {
    background: #f1f1f1;
}
#cols table td.right {
    padding: 0 0 250px 0;
    background: #ccc;
    position: relative;
}
#cols table td.right div + div {
    position: absolute;
    bottom: 0;
    width: 250px;
    height: 250px;
    background: #000;
    color: #fff;
}

Results:

As you see, this code works for the 2 cases: left column is bigger; or, the right column is bigger.