Align a set of images at top left of a div with css

Question

I use this code:

.photocontents {
    position: relative;
    display: inline-block;
    padding: 20px;
    margin: 0px;
    width: 100%;
    height: auto;
}
.photo {
    position: relative;
    float: left;
    display: inline;
    padding: 0px;
    margin: 10px;
    width: auto;
    height: auto;
}

to make a photo gallery that has the result of image (a).

What I want is to align those photos at top too, as image (b) shows. How is that possible?

Answer 1

It's not possible with pure CSS. You have to use some Javascript.

These jQuery plugins are doing exactly what you're looking for:

1. jQuery Isotope
2. jQuery Masonry