Table inside a div - contents of td causes horizontal overflow. How can I constrain the width?

http://jsfiddle.net/HeMKY/8/

HTML

<div id="wrapper">
    <table>
        <tr>
            <td class="left">left</td>
            <td class="right"><span>this text is right-floated</span></td>
        </tr>
        <tr>
            <td class="left">left</td>
            <td class="right"><img src="foo.gif" height="100" width="400" /></td>
        </tr>
        <tr>
            <td class="left">left</td>
            <td class="right">THISTEXTISWAYTOOLONGTHISTEXTISWAYTOOLONGTHISTEXTISWAYTOOLONG</td>
        </tr>
    </table>
</div>

CSS

#wrapper
{
    max-width:300px;
    height:300px;
    background-color:gray;
    padding:5px;
}
td
{
    padding:5px;
}
td.left
{
    background-color:yellow;
}
td.right
{
    background-color:green;
}
td.right span
{
    float:right;
}

RESULT

WHAT I WANT

Note how both images and text could cause overflows. Also, some content that n开发者_开发知识库aturally fits is right-floated, so I can't just do overflow:hidden or else that naturally-fitting content gets hidden as well. I also need to enable .left to stretch to fit its contents, i.e. the content there could range in width from 10-150px and I want that column to be no wider than its widest content. As far as I know, this isn't possible without tables so that's why I'm using a table instead of table-layout:fixed or a CSS grid framework.

I was hoping some combination of width:100% or max-width:100%; on the table or tr would do the trick, but I can't get it to work.

You can add word-break:break-all; to your td. However, you will still have a problem with your image. What do you expect to happen with the image? You can't wrap an image so it either needs to be hidden or smaller. I don't think there is a workaround for that.

After learning that this isn't supported by FF, which I guess I kind of knew in the back of my mind I did some more research. From what I found you can't do it. There are two hacks you can work in.

First one is to use the tag as discussed by quirksmode. Downside being that it isn't supported everywhere.

The other is to insert a space character that is extremely narrow. This gives the table cell something to break on. Hopefully somebody else can come up with a better, standards compliant answer, but I can't find one.

I'd suggest you try table-layout: fixed as shown here (works in ie6+, firefox, & chrome)

Combined with defining width: 40px(or whatever) for your left column and setting overflow-x: hidden on the right column, you should achieve the desired affect.

Seeing what you want to do, instead of using a table, consider using Blueprint's grid.

This page shows what it can do, and it is all achieved by simply importing their grid.css file in your html document and adding some divs with specific class names.

You can download Blueprint here and then read h3. Creating a Grid paragraph in the TUTORIAL.textile in the download.