CSS make divs of various heights and widths take as little space as possible by “nestling”

Question

Hi I am trying to make a bunch of divs of various heights float into the optimum position to take up as little space as possible collectively. I have tried using inline blocks with the vertical-align set to top as well as floating everything to the left. The divs are nestling(sort of) but leaving large gaps from time to time. Is there a way with css (or javascript if necessary) to organize these divs together like tiles without gaps? (or the smallest gaps possible)

thanks

Answer 1

Or take a shine to Masonry's bigger sister Isotope. On top of Masonry, she's got many other tricks up her sleeve, such as sorting and filtering items and much more.

Answer 2

Like the images on http://iam.beyonce.com/?

If yes, check out the demos on jQuery Masonry and learn how to fix it up.