Floated thumbnail gallery, different sizes, how to handle?

Question

When simply doing float:left to all thumbnails of the same size, a gallery looks great. But when different size thumbnails come in to play, that is no longer the case.

What is the best way to handle different size thumbnails? Do I need to use tables instead?

Solution 1

I think the best solution is to give each thumbnail a div container with a fixed size, so that every thumbnail takes the same space. I mean, don't resize your thumbnails. The picture in the div should be centered.

Solution 2

None of the possible CSS solutions look particularly good.

I recommend using JavaScript+jQuery instead, specifically one of these plugins:

• http://masonry.desandro.com/
• http://isotope.metafizzy.co/

Solution 3

I have used following plugin, it's working fine :

http://suprb.com/apps/gridalicious/

Comments

[Dónal]

those plugins are truly amazing

[kleopatra]

Note that link-only answers are discouraged, SO answers should be the end-point of a search for a solution (vs. yet another stopover of references, which tend to get stale over time). Please consider adding a stand-alone synopsis here, keeping the link as a reference.