title: Table inside a div - contents of td causes horizontal overflow. How can I constrain the width?
body: <p><a href="http://jsfiddle.net/HeMKY/8/" rel="nofollow noreferrer">http://jsfiddle.net/HeMKY/8/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td class="left"&gt;left&lt;/td&gt;
              &lt;td class="right"&gt;&lt;span&gt;this text is right-floated&lt;/span&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="left"&gt;left&lt;/td&gt;
              &lt;td class="right"&gt;&lt;img src="foo.gif" height="100" width="400" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="left"&gt;left&lt;/td&gt;
              &lt;td class="right"&gt;THISTEXTISWAYTOOLONGTHISTEXTISWAYTOOLONGTHISTEXTISWAYTOOLONG&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>RESULT</p>
  
  <p><img src="https://i.stack.imgur.com/s9DJt.png" alt="overflow"></p>
  
  <p>WHAT I WANT</p>
  
  <p><img src="https://i.stack.imgur.com/fu5g5.png" alt="overflow is clipped"></p>
  
  <p>Note how both images and text could cause overflows. Also, some content that naturally fits is right-floated, so I can't just do <code>overflow:hidden</code> or else that naturally-fitting content gets hidden as well. I also need to enable <code>.left</code> 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 <code>table-layout:fixed</code> or a CSS grid framework.</p>
  
  <p>I was hoping some combination of <code>width:100%</code> or <code>max-width:100%;</code> on the <code>table</code> or <code>tr</code> would do the trick, but I can't get it to work.</p>