title: achieving a fluid picture grid, with different heights of rows
body: <p>I'm having troubles achieving my designers goal of a fluid picture grid, but based on rows of equally high pictures, not columns of equal width which everyone seems to be so fond off.</p>
  
  <p>here's he design:</p>
  
  <p><a href="https://dl.dropboxusercontent.com/u/7187819/Capture.PNG" rel="nofollow">https://dl.dropboxusercontent.com/u/7187819/Capture.PNG</a></p>
  
  <p>here's the point where i got stuck:
  <a href="http://jsfiddle.net/EwTjD/1/" rel="nofollow">http://jsfiddle.net/EwTjD/1/</a></p>
  
  <p>my goal is a fluid picture-grid that scales with the map next to it when you resize the browser.</p>
  
  <p>I tried background-image first, but that got me stuck with a height that didn't scale. And to be able to use <code>transform</code> i got to use <code>position:absolute</code>, which messes up my floating img's...</p>
  
  <p>any help? :)</p>
  
  <p>ps: this should be achieved without Javascript</p>