CODEWITHSUNDEEP
jqueryhtmlcssmargin
Emir Dupovac
Emir Dupovac

Reputation: 756

Unexisting margins

I'm working on some layout made from squares, their width is defined by percentages and height by padding the same as width for 1:1 aspect, and using jQuery Masonry for positioning them. The problem is that some like margins started showing up, there is no padding nor margins set to them, but after re sizing window they disappear, here is the fiddle:

https://jsfiddle.net/uvrcpuag/3/embedded/result/

<div id="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

.square {
    width: 16.666666666666666666666666666667%;
    padding-bottom: 16.666666666666666666666666666667%;
    background-color: #000;
    position: relative;
    float: left;
}

Upvotes: 1

Views: 69

Answers (1)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try to trigger manually resize() like,

$(document).ready(function () {
    var msnry = new Masonry('#container', {
        itemSelector: '.square'
    }).resize();  // call resize()  
});

Demo

Upvotes: 1

Related Questions