title: Two img next to each other floated dont go next line
body: <p><a href="http://jsfiddle.net/sV36r/" rel="nofollow">http://jsfiddle.net/sV36r/</a></p>
  
  <pre><code>&lt;div id="a"&gt;&lt;div style="max-width: 350px;"&gt;&lt;img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Ultraviolet_image_of_the_Cygnus_Loop_Nebula_crop.jpg/691px-Ultraviolet_image_of_the_Cygnus_Loop_Nebula_crop.jpg" width="100%" /&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div id="b"&gt;&lt;img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Ultraviolet_image_of_the_Cygnus_Loop_Nebula_crop.jpg/691px-Ultraviolet_image_of_the_Cygnus_Loop_Nebula_crop.jpg" style="width: 50px; height: 50px" /&gt;&lt;/div&gt;
  
  #a
  {
      float: left;
  }
  
  #b
  {
      float: right;
  }
  </code></pre>
  
  <p>here are two images, floated left and right. When I shrink the width, the right goes under the left - I dont want it. Instead, the left image should shrink.</p>