alstack alstack - 3 months ago 21
CSS Question

Masonry ColumnWidth %

I am hoping someone can help me out. I've been going at it for quite some hours, but I can't seem to fix it (I am a rank $%#@! amateur). I've been trying to get masonry working with different width sizes. The sizes are in %. I am customizing a Wordpress theme, so I am dealing with a pre coded masonry file and pre coded css.

The css and html basically come down to this (if you need more code, please let me know):

.posts {
overflow: visible !important;
position: relative;
}

.post-container {
width: 50%
padding: 10px;
overflow: hidden;
}

.post-container .w2 {
width: 100%
padding: 10px;
overflow: hidden;
}


The html:

<div class="posts">
<div class="post-container w2>Post</div>
<div class="post-container>Post</div>
<div class="post-container>Post</div>
</div>


The masonry:

//Masonry blocks
$blocks = $(".posts");

$blocks.imagesLoaded(function() {
$blocks.masonry({
itemSelector: '.post-container',
});

// Fade blocks in after images are ready (prevents jumping and re-rendering)
$(".post-container").fadeIn();
});

$(document).ready( function() { setTimeout( function() { $blocks.masonry(); }, 500); });

$(window).resize(function () {
$blocks.masonry();
});


So: the two 'post-container' won't slide together if the first post is a 'post-container .2'. If I post the two 'post-container' first however, and then the 'post-container .2' they do slide together.
From searching the interwebs, I gathered it has something to do with the masonry ColumnWidth. I tried many different options, but to no avail. Setting ColumnWidth to '.post-container' wont do the trick at least. It seems the masonry always uses the 100% width if the first post is '.post-container .w2' despite all the following posts being 50% ('post-container').

What do I need to do so I can have different % widths, even if the first is 100%?

I hope I am not too unclear, but if I am, please tell me and I will try to explain it better.
Thanks for taking the time to read this.

Best,
Alan

Answer

If columnWidth is not set, Masonry will use the outer width of the first element.

This explains why each element was in new row, they all had 100% width.

It is convenient to use external CSS class to set size of the column. It is also important to set box-sizing: border-box; if your elements have paddings.

In the following demo I've set columnWidth option to 25% - you can adjust it in .sizer CSS class, if for example you will need to have 10 elements side by side - you have to set it to 10%. You can of course "connect" columns and have two elements with 50% widths set in CSS.

Demo: http://jsfiddle.net/Lob6mse1/2/

JavaScript:

$blocks = $(".posts");
$blocks.masonry({
    itemSelector: '.post-container',
    columnWidth: ".sizer"
});

HTML:

<div class="posts">
    <div class="sizer"></div>
    <div class="post-container w2">Post</div>
    <div class="post-container">Post</div>
    <div class="post-container">Post</div>
</div>

CSS:

.posts * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.posts {
    position: relative;
}

.post-container {
    width: 50%;
    min-height: 100px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #999;
}

.w2 {

    width: 100%;
    height: 100px;
    padding: 0;
    background-color: #EEE;
}

.sizer {
    box-sizing: border-box;
    width: 25%;
}