Overflow in table cells

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 wan开发者_开发技巧t 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.

One way to achieve is use put all content in div element and set div overflow property to auto

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

An alternative if your content shouldn't actually even be in a table is to use a CSS grid system, such as 960.gs or Nicole Sullivan's "OO-CSS".

You'd want to divide a container into however many grids you needed and these lend themselves much better to CSS decoration. They're much more flexible and simple to use.