Masonry.js – Strange problem with div alignment

[copperkid]

Hello all.
I’ve been developing a tumblr theme that uses percentage width for columns/content, and have encountered a problem with the Masonry boxes lining up properly.

You can view the blog here.

When the page first loads, the images display gutters. The moment the page is scrolled, these gutters disappear and the images align beside each other as intended.

I’ve snipped out the relevant code below. Any advice would be appreciated, I’ve completed racked my brain on this one!

HTML:

{block:Posts}

{block:Photo}{/block:Photo}

{/block:Posts}

CSS:

#wrapper {
min-width: 1024px;
min-height: 800px;
width:100%;
background: #ccc;
position:relative;
}

#posts {
left:25%;
width: 75%;
position:relative;
background: #3cc;
}

#posts .entry img {
width:100%;
height:auto;
}

#wrapper .entry {
display:none;
width: 33%;
float: left;
position:relative;
}


Javascript:




[TheDoc]

It seems to be appearing fine for me. Are you still having troubles with it?

[copperkid]

Yes, it’s still troubling me. What environment have you tested on? I’ve tried Firefox/Chrome/Safari, both Mac/PC.

I uploaded a screenshot here to make sure I’m clear in describing the problem.

Originally, I wanted the 3 columns to fill the space equally – using 33.34% width – which would eliminate that right-most vertical teal space. Then I realized that Firefox truncates fractional percentages, causing the third column to get randomly dropped whenever the browser window was resized. Anywhere I looked online claimed there was no real solution to the truncation.

I was willing to live with 33% width and that right teal space, but I can’t figure out why the page loads with gutters now.

[Senff]

FWIW: when I open the page in Safari, Firefox or IE (all PC), there is no spacing between the images before scrolling.

[copperkid]

Hmm, interesting. Thanks for that Senff. Although, that almost makes the problem more perplexing, hah. I even just tried loading it on my Windows-based netbook, for an alternate PC, and still gutters.

[TheDoc]

It doesn’t seem to have anything to do with scrolling, it seems to have something to do with available view port.

If I have the inspector open, I never get the gutters. If I don’t have the inspector open, I do until I scroll a bit.

[TheDoc]

The second it loads the next group of posts on the infinite scroll is when it breaks. Try turning off infinite scroll to see if that fixes it. If it does then at least you’ve narrowed the problem.

[copperkid]

You nailed it with the view port size.

Updated this:

#wrapper {
min-height: 800px;
}


…to this:

#wrapper {
min-height: 2000px;
}


That would explain why it would load fine for some but not others. This should ensure enough content loads in no matter the screen resolution or browser window size, eliminating the temp gutters. Thank you TheDoc!

[TheDoc]

Just remove the min-height altogether, you shouldn’t need it.

[copperkid]

Now if only Firefox would accept fractional percentages, I could get rid of that spacer on the right side.

Is there an obvious way to align the divs to the right side of , as opposed to the left? I could live with the 33% width if they were just touching the right side of the page. Anything I’ve tried keeps them aligned to the left.

Hope you don’t mind the sub-question, and thank you again for that find.

[copperkid]

Regarding the min-height: if I remove it, the pre-scroll gutters come back. I’m not sure if there’s a better solution, but it feels like an acceptable hack.

[Author]

Posts