div gets pushed down for apparently no reason

Question

I have a simple grid with 5 divs, each one containing an image.

Why the last div (with the different image) has an offset? It gets pushed down for no apparent reason.

Example here.

CSS

.thumb-container {
  border: 1px solid #e5e5e5;
  padding: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
  width: 130px;
  height: 130px;
  display: inline-block;
}

JavaScript

  $.when( loadImageSet(imageURLs) ).then(function(data){

    var imageSet = [];

        $.each(data, function(index, value){
            imageSet.push(value);
        })

    for (var i = 0; i < imageSet.length; i++) {

        var thumbContainer = $('<div>',
          {class: 'thumb-container'});

        img = resizeImage(imageSet[i], 100);
        thumbContainer.append(img);
        $('.box').append(thumbContainer);
    }
  });

EDIT

I got it, I need to set vertical-align: top to .thumb-container or display:block to the img. But still don't understand why it behaves that way.

Don't know what you mean by pushed down. Do you need to have `
` at the end? — Al Lelopath, Jul 29 '14 at 15:05
Because the image is not the same size. All the images are 90x100 , but the last one is 100x50 — Luís P. A., Jul 29 '14 at 15:05
@LuisP.A. I would understand that if the image had the height bigger than the box, but that's not the case.. — zok, Jul 29 '14 at 15:06

score 3 · Answer 1 · answered Jul 29 '14 at 15:06

3

img { display: block; }

Just add this line.

Regards D.

answered Jul 29 '14 at 15:06

DevangKantharia

704
3
10

Vertical-align: top is not a better solution, of course you can use it, but making the image tag as block, will take the full width ideally, and making it adjust in box. – DevangKantharia Jul 29 '14 at 15:08
1

If he can fix it without changing the display type and therefore doing float: left that is alright isn't it? – Dominic Jul 29 '14 at 15:11
Yes float: left; seems like a better idea. – kartikluke Jul 29 '14 at 15:13
yes, float: left is also a solution, but float property is sometimes risky, as it pushes the image everytime to the left, even if there is another tag next to it. Float mostly not preferable by all. – DevangKantharia Jul 29 '14 at 15:14
Please refer to this [link](http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/) for floating issues. – DevangKantharia Jul 29 '14 at 15:20

score 3 · Accepted Answer · edited May 23 '17 at 12:04

3

Because your elements are inline-block elements they will be vertically aligned to the baseline by default. As one of your elements is a different size from the others this is causing a box to appear lower. By setting them to vertical-align:top it solves this issue

See this post for more information about inline-block alignment

By adding display:block to the image it will remove the extra space added after the image and thus will make all your .thumb-container elements the same height again

See this post about the space after the image

edited May 23 '17 at 12:04

Community

1
1

answered Jul 29 '14 at 15:11

Pete

57,112
28
117
166

Exactly what I needed to know! – zok Jul 29 '14 at 17:10

score 0 · Answer 3 · answered Jul 29 '14 at 15:08

0

if you don't want to change the css another solution could be to add a div with fixed height and with inside the .thumb-container

answered Jul 29 '14 at 15:08

peterpeterson

1,315
2
14
38

score 0 · Answer 4 · answered Jul 29 '14 at 15:15

Not really sure why but the javascrip altering the size of the image also alters where the box is positioned.

function resizeImage(image, size){
var w = image.width;
var h = image.height;

// resize width and make height proportional
var nh = size;
var nw = w*size/h;
if (nw > 100)
{
  nw = 100;
}


// if height > size, resize height and make width proportional
if (nh > size){
    nh = size;
    nw = w*size/h;
}

image.width = nw;
image.height = nh;

return image;

}

Change the resize function to that and it works, not the best but it works.

div gets pushed down for apparently no reason

4 Answers4