title: place two divs next to each other with css table
body: <p>I would like to place two divs next to each other. The right div's width is determined by it's content and should be aligned to the right of the container div. The left div's width should span the rest of the page.</p>
  
  <p>I managed to do this with the following code (a minimized version of the original obviously):</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
          #container {
              border: 1px solid black;
              display: table;
              width: 1000px;
          }
  
          #left {
              display: table-cell;
              vertical-align: top;
              width: 100%;
          }
          #right {
              display: table-cell;
              vertical-align: top;
          }
          #image {
              width: 400px;
              height: 300px;
              background-color: red;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id="left"&gt;
              blabla
          &lt;/div&gt;
          &lt;div id="right"&gt;
              &lt;div id="image"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Works perfectly in both chrome and firefox, but in IE, the #right div is shown below the left one.</p>
  
  <p>The idea is that only the #container and the #image have dimensions that are explicitly set. All other dimensions should be inferred from those by clever aligning somehow. The display: table-cell css property accomplishes this nicely, but nothing else seems to do...</p>
  
  <p>Does anyone know a solution? There are a lot of "place div's next to each other" questions already, but all solutions seem to depend on all div's having fixed widths..</p>