html - Dynamically created image layout -

using html, css, , jquery, , given set of images various dimensions, how generate image layout resembling below?

[note: don't want generate exactly layout - know how construct in html tables , rowspan/colspan (ugly), how programmatically, , nicely?]

i have no idea how approach this, html rather box-row-column-based, , sort of stepping out of that. there way @ makes easier program? (perhaps absolute positioning , bashing out computations?)

a follow-up question might how avoid problem of inevitably inexact dimensions. fine have below, long everything's lined , square each other.

using css position easy way long have static image data here i.e. have images , not change. harm here have calculate positions manually.

just make "holder" div , give css position: relative, inner stuff position: absolute:

<div id=""holder>   <img id="image1" />   <img id="image2" />   .   .   . </div> 

css:

#holder {   position: relative; } #image1 {   position: absolute;   top: **distance top goes here**;   left: **distance left**; }