I need to create a chat layout that uses all the available space and scales nicely, but has few fixed sizes.

Here's the structure:

<table style="width: 100%; height: 100%">
    <tr>
        <td></td>
        <td style="width: 200px; background: red;"></td>
    </tr>
    <tr>
        <td style="height: 100px; background: blue"></td>
        <td></td>
    </tr>
</table>

However, I want to place a lot of content in the first table cell and I want it to scroll, so it won't expand the table.

Is it possible to make it overflow properly, without having a fixed height for the cell? Simply adding overflow: auto doesn't seem to work.

PS. I hate tables, but can't figure out a very clean and cross-browser way to do a layout like this with divs and css. If someone can come up with one, I'll gladly use it.