title: How can I place two images side by side with HTML and CSS to optimally fill up a given width?
body: <p>I want to place two arbitrary images side by side inside a DIV element, which is exactly 800 px wide (width=800px). The images can be a variety of sizes, in width and height too. Sometimes width greater than height and sometimes width lesser than height. I put both images inside a div element, and a third div which contains both. I tried this code, but doesn't work properly. How should I do it? JSFiddle: <a href="http://jsfiddle.net/gUT43/" rel="nofollow">http://jsfiddle.net/gUT43/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  img {
       max-width: 100%;
       height: auto;
       width: auto\9; /* ie8 */
      }
  div {
   display: inline-block;
   white-space: nowrap;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div style="max-width: 800px; border:2px black solid"&gt;
  
   &lt;div style="height: auto; border:1px green solid""&gt;
    &lt;img src=http://i.imgur.com/Xt6vUQD.jpg&gt;
   &lt;/div&gt;
  
   &lt;div style="height: auto; border:1px blue solid""&gt;
    &lt;img src=http://i.imgur.com/BqFMNlq.jpg &gt;
   &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>