CODEWITHSUNDEEP
cssgrid-layout
joskes
joskes

Reputation: 61

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 (http://placehold.it/250x350) does not seem to have this problem. See result of html and css here: http://jsfiddle.net/VqJzK/1/ .

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="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_26_19311105%3Flocatt%3Dview%3Aderivative2&amp;size=LARGE&amp;type=TEXT"/>
    </div>

    <div class="thumb">
     <img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_02_19310521%3Flocatt%3Dview%3Aderivative2&amp;size=LARGE&amp;type=TEXT"/>
    </div> 
....

Upvotes: 2

Views: 900

Answers (2)

andyb
andyb

Reputation: 43823

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.

Upvotes: 1

JKirchartz
JKirchartz

Reputation: 18042

sounds like the standard inline-block bug, simple fix is to change your code to this:

 <div class="thumb">
     <img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_26_19311105%3Flocatt%3Dview%3Aderivative2&amp;size=LARGE&amp;type=TEXT"/>
    </div><div class="thumb">
     <img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_02_19310521%3Flocatt%3Dview%3Aderivative2&amp;size=LARGE&amp;type=TEXT"/>
    </div>

butt the elements right up next to each other, because it's treated as inline spaces between elements matter, because text itself is inline

alternatively you could use comments like this:

<div class="thumb">
         <img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_26_19311105%3Flocatt%3Dview%3Aderivative2&amp;size=LARGE&amp;type=TEXT"/>
</div><!--

--><div class="thumb">
         <img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_02_19310521%3Flocatt%3Dview%3Aderivative2&amp;size=LARGE&amp;type=TEXT"/>
   </div>

Upvotes: 0

Related Questions