CSS image quilt

Question

So i'll try and show how I would ideally like this to look. I have images that will be different every time, and I want them to display like a 2 row quilt. Here's an ugly example:

aaabbbbddddddddddhhhhhhhhh
aaabbbbddddddddddhhhhhhhhh
aaabbbbeeeeeggg  hhhhhhhhh
   bbbbeeeeeggg  hhhhhhhhh
ccccccccffffffffffggggiiiiii
ccccccccffffffffffggggkkkk
ccccccccffffffffff    kkkk

I don't know if that makes sense, or if it is realistically achievable. To explain in a more codelike manner, I want the divs to not only float left or right, but if there is available space, to also float down below the previous image before filling in next to it. I can't use absolute positioning, because different images will be using the same css/html/javascript in different instances.

Answer 1

There’s a jQuery plugin for that: jQuery Masonry. I’m not aware of any easy non-jQuery solutions to your problem.