joskes joskes - 6 months ago 44
CSS Question

CSS simple thumbnail grid shows weird spacing

I want to create a simple thumbnail grid for showing images from the Europeana API. However for some weird, probably very obvious, reason I get random rows in this grid with large spaces as if the floating isn't working. However the same layout with random images ( does not seem to have this problem. See result of html and css here: .

CSS of the grid

.thumb {
width: 200px;
background-color: #F5F5F5;
border-radius: 5px;
margin-bottom: 0.5em;
margin-top: 0.5em;
text-align: left;
position: relative;
display: inline-block;
float: left;

.thumb img {
width: 150px;
vertical-align: middle;


and the html:

<div class="thumb">
<img alt="test" src=";size=LARGE&amp;type=TEXT"/>

<div class="thumb">
<img alt="test" src=";size=LARGE&amp;type=TEXT"/>


The broken formatting is because some images are taller in the second example. The taller images take up more space and because the thumbnails have float:left set, they flow around the taller one. This explains why the first example works, since they all have the same height.

That said, float:left is also overriding the display:inline-block with display:block - see css display property when a float is applied

If you remove float:left or set the height of the .thumb class the thumbnails will also line up as expected.