Question

I’ve built a very basic grid of divs by using float:

However when expanding one of the items placed in the right-hand side column, here is what happens (please excuse my crude/lame arrows I’ve used to illustrate what I’m trying to achieve):

Which is what I expected but not what I really want. I’m looking for a neat way of having boxes A and B move up to fill the empty spot and items C-H to move up one row so that available space is utilized most efficiently.

Here is the JSFiddle I’ve created to illustrate this problem (apologies it’s not clickable, stack overflow rep thing again…) :

http://jsfiddle.net/VDV6S/4/

I would appreciate any suggestions.

Answer 1

You need jQuery Masonry, or something similar.

Alternatively, you can split the items into two columns manually: http://jsfiddle.net/thirtydot/VDV6S/5/

Another option is to use CSS3 columns, however the browser support might not be acceptable.