jQuery masonry with percentage width

Question

is there a way to get jquery masonry working with percentage width divs? I'm trying to create a fluid layout with 25%, 50%, 75% and 100% widths. But as soon as i set the widths with % the automatic resizing stops working, and if I try to manually trigger mason onresize I get rounding errors that makes the divs jump around. Also it becomes quite buggy that it sometimes ignores the height, and sometimes just stops placing the divs and put them all on 0,0

HTML markup:

    <div class="boxes">
    <div class="box weight-1">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box weight-1">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box weight-2">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box weight-3">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
</div>

CSS properties:

.weight-1 {
width:25%;
}

.weight-2 {
width:50%;
}

.weight-3 {
width:75%;
}

.weight-4 {
width:100%;
}

Muchos gracias for any input, J

Answer 1

i have same problem, try, try, and try, and this work for me.

.masonry-brick {
   width:25%;/*or others percents*/

   /*following properties, fix problem*/
   margin-left:-1px;
   transform:translateX(1px);
}

Answer 2

forget the .wight stuff add only this in css

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

masonry js

$(function(){
    var container = $('#boxes');

    container.imagesLoaded(function(){  
        container.masonry({
           itemSelector: '.box',
           columnWidth: function( containerWidth ) {
              return containerWidth /4;// depends how many boxes per row
            }(), // () to execute the anonymous function right away and use its result
            isAnimated: true
        });
    });
});

change holder div to

 <div id="boxes" class="masonry clearfix"> 

and boxes to

<div class="box">...</div>

( note that Firefox might cause bit issue with exact divider of 100 like 25% so set the boxes at 24.9 or 24% )outdated.

Use box-sizing to avoid drooping column issue.

Answer 3

I had the same problem … solved it with css calc option. That works fine, but not on resizing the windows, then it gets a bit mad …

@media screen and (min-width:1020px){.brick { width: calc((100% - 40px) / 5); }}

@media screen and (min-width:800px) and (max-width:1019px){.brick { width: calc((100% - 30px) / 4); }}

@media screen and (max-width:799px){.brick { width: calc((100% - 10px) / 2); }}

Answer 4

If you want 25% width not 24.9% add margin-left:-1px!important; to your box