title: Dynamic three variable width column HTML layout
body: <p>I know there are a million similar articles and I have spent hours trying them all to no avail.  I want to be have to have three columns and allow each column to take as much space as necessary but the entire container not to exceed a fixed with (say 500 pixels in this example).  The left column must flush left and the right flush right at all times.  Often the left and/or right column will be empty and the center should use the entire width.  </p>
  
  <p>I can certainly accomplish this with a table with fixed layout or divs with fixed sizes, however, I want to be able to dynamically reuse the same containers to display one, two, or three columns of data and use then entire width available.  I can absolutely allow for a fixed with on the contents in col 1 and column 3, though it does not seem to help.</p>
  
  <p>Here is an example:</p>
  
  <pre><code>&lt;div style="width:500px;background:#ff0000;max-width:500px;"&gt;
      &lt;div style="background:#00ff00;float:left;display:table-cell;"&gt;
            col1
      &lt;/div&gt;
      &lt;div style="background:#ff00ff;float:left;display:table-cell;overflow:hidden;text-overflow:elipsis;white-space:nowrap;"&gt;
            REALLY LONG DO NOT EXCEED 500 - WIDTH COL 1 AND COL2 SOMEHOW WOULD BE NICE
      &lt;/div&gt;
      &lt;div style="background:#00ffff;display:table-cell;float:right;"&gt;
            col3
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Sorry, cannot show the output of the above since it will not allow me to post an image.</p>