title: Shrink an image to fill the remaining space in the page horizontally
body: <p>I have two divs positioned side by side horizontally. The width of the first is determined by the text within it, and I simply want to shrink an image in the second div so that its width fills the remaining horizontal space on the page.</p>
  
  <pre><code>+--------------------------------------------+
  |           |                                |
  |           |                                |
  |           |                                |
  |           |                                |
  |           |                                |
  |  &lt;div 1&gt;  |            &lt;div 2&gt;             |
  | Some text |          Large image           |
  |           |                                |
  |           |                                |
  |           |                                |
  |           |                                |
  |           |                                |
  +--------------------------------------------+
              &lt;---------remaining-space--------&gt;
  &lt;---------------- page width ----------------&gt;
  </code></pre>
  
  <p>Currently, I'm shrinking the image to the page width, but what I really need is to shrink to the page width minus the width of the text div. </p>
  
  <p>I'm after a <strong>CSS</strong> solution with <strong>IE</strong> compatibly and <strong>without hard-coded fixed widths</strong>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#text
  {
    background-color: black;
    color: white;
    float: left;
  }
  
  img
  {
    position: absolute;
    max-width: 100%;  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id=text&gt;Some text&lt;/div&gt;
  &lt;img src="http://www.principiaprogrammatica.com/image.jpg"/&gt;</code></pre>
  </div>
  </div>
  </p>