title: How to make a div in a dynamically sized table cell fill the cell
body: <p>I have a royal pain in the butt problem.  I have a page layout where there are two columns to a table.  The right column is always 300px wide, but the left column is to fill the remaining space in the container.  This is easy enough with the following:</p>
  
  <pre><code>&lt;table width="100%" cellpadding="0" cellspacing="0"&gt;
    &lt;tr&gt;
      &lt;td width='*'&gt;
      &lt;/td&gt;
      &lt;td width='300'&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Now, I want the left column to contain a div that has some styling applied to it.  In that styling there is a rule that the width of the div is 300px.  This is fine for the RIGHT column, but I want the left column to be filled by the div.  My instincts tell me to add a style tag with "width: inherit;" but that doesn't work, it simply strips the width altogether.  I believe this to be because CSS doesn't know how to inherit width="*". </p>
  
  <p>So, what is the best way to style this div in the left column such that it fills the TD?  Any width % value is calculated relative to the page, not the container.  </p>
  
  <p>My only solution (haven't done this yet) that I can come up with is to resize the TD with CSS whenever the window paints, then the div's style: inherit would work, I believe.  I REALLY don't want to do it that way as I'm praying there's a CSS compliant way of doing this.</p>