Dynamically created image layout

Question

Using HTML, CSS, and jQuery, and given a set of images with different sizes, how would I generate an image layout similar to the one below?

[Note: I don’t want to generate this particular layout - I know how to build it in HTML with tables and rowspan / colspan (ugly), but how programmatically and beautiful?]

I really don’t know how to approach this, since HTML is rather based on a column-column, and this is a kind of way out of this. Is there a way to take a look at this that makes programming easier? (maybe absolute positioning and just knocking out calculations?)

The next question may be how to avoid the problem of inevitably inaccurate sizes. It would be nice to have something like this below, as long as everyone is lined up and glued together.

Answer 1

Using css position is an easy way if you have static image data here, that is, you have images and they will not change. The only harm here is that you have to calculate the positions manually.

Just make a “holder” div and give it css position: relative , then the inner material position: absolute :

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

CSS

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