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!
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.
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.
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.
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!
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.
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.
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:
<div id="wrapper">
<div id="posts">
{block:Posts}
<div class="entry">
{block:Photo}<img src="{PhotoURL-500}">{/block:Photo}
</div>
{/block:Posts}
</div>
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:
<script type="text/javascript">
$(window).load(function () {
$('#posts').masonry(),
$('.masonryWrap').infinitescroll({
navSelector : "div#navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div#navigation a#nextPage",
// selector for the NEXT link (to page 2)
itemSelector : ".entry",
columnWidth: $('#posts').width() / 3,
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 10,
loadingImg : "http://static.tumblr.com/ejm8w78/KZjlxxt0d/ajax-loader.gif",
loadingText : "<em></em>",
},
// call masonry as a callback.
function() { $('#posts').masonry({ appendedContent: $(this) });
});
});
$(window).resize(function(){
$('#posts').masonry({
columnWidth: $('#posts').width() / 3
});
});
</script>
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.
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.
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!
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.