Question

I’m working with a mosaic (jsFiddle) made with simple CSS and HTML.

The mosaic has rows and columns of the same width and height. Each one of its cells should be filled by an entire box or a part of it. In other words, every box should occupy one or more boxes length-wise and one or more boxes width-wise.

When all the boxes take up only one row, everything works fine. However, when I try to make a box bigger than a row, the float:left stops working the way I want it to:

http://img198.imageshack.us/img198/5207/boxshoudgohere.png

jsFiddle with the issue as displayed above.

As illustrated above, the gray boxes that are (in the HTML) right next to the big box skip to the next row; I need to move the boxes to where the red arrows point. My question is: how can I prevent the gray boxes from moving?

Take into account that I would prefer a clean solution. In other words, moving the boxes with absolute or relative positioning wouldn’t be the best option since the boxes and their width/height are generated by JavaScript (although feel free to post any answer).

Thanks for your time.

Answer 1

Jquery Masonry will do this for you. Unfortunately you won’t achieve what you’re after with simple markup and CSS.