title: Dynamically created image layout
body: <p>Using HTML, CSS, and JQuery, and given a set of images with various dimensions, how would I generate an image layout resembling the below?</p>
  
  <p><img src="https://i.stack.imgur.com/hRE6V.png" alt="Desired layout"></p>
  
  <p>[Note:  I don't want to generate <em>exactly</em> this layout - I know how to construct it in HTML with tables and rowspan/colspan (ugly), but how programmatically, and nicely?]</p>
  
  <p>I really have no idea how to approach this, as HTML is rather box-row-column-based, and this is sort of stepping out of that. Is there a way to look at it that makes it easier to program?
  (perhaps absolute positioning and just bashing out the computations?)</p>
  
  <p>A follow-up question might be how to avoid the problem of inevitably inexact dimensions. It would be fine to have something like that below, just as long as everything's lined up and square with each other.</p>
  
  <p><img src="https://i.stack.imgur.com/fVnXw.png" alt="Alternate layout"></p>