The container width

[trewknowledge]

Hello,

So I am trying to have my masonry "bricks" centered on the page. The container for the bricks is the full width of the browser.

When the page loads the bricks, currently there are 3, seem to be off-centered as masonry is making the width of the container much larger than the width of the 3 bricks.

Is there anything needed to do in order for the width of the container to be the same width of all of the bricks on the page?

[trewknowledge]

And here is a test site:

http://trewknowledge.com/masonry/test.html

[desandro]

Looks like the ul padding is throwing off the size. Try adding

#topics-masonry { padding: 0; }

[trewknowledge]

Thanks desandro.

Unfortunately adding the padding to 0 did not resolve the issue.

It seems to work fine when I add several more "bricks" however when there are only a couple is when the issue appears.

[desandro]

Ah, good call. Empty columns were still being used to calculate the site of the container. This has been fixed in SHA: 4196062 . Use v2.0.110927 and you should be good. See test - centered few

[trewknowledge]

Perfect works like charm!

Thanks so much!

[dsplz]

Hello desandro,

first, thanks for your great script.

i'm using your .js with wordpress... i searched so long for a option to center the whole content, but i didnt work: http://fresi.ch/simwordpress/

perhaps u can have a look. thanks

[desandro]

@dsplz Did you see Centered? The latest version of Masonry (v2.1.0) has a isFitWidth option that enabled center layouts.

[dsplz]

damn, i had an old versoin, sorry for interrupting u thank you so much for your work

[dsplz]

ok, next problem coming. i've seen through the issues etc. but didnt found any solution. I just updated to the newest masonry version and now i get an div overlapping issue.

http://fresi.ch/simwordpress/

perhaps its an infitie scroll issue now. dont get it

[desandro]

@dsplz See example in http://masonry.desandro.com/docs/methods.html#appended

[dsplz]

Ok, i guess this is a "wrong/old" direction:

jQuery('#postwrapper').masonry({ 

    itemSelector: '.post',
        columnWidth: 10,
        isFitWidth: true,
    isAnimated: true,
    animationOptions: {
      duration: 300,
      queue: false
    }
});

jQuery('#postwrapper').infinitescroll({
    navSelector  : '.nextPrev',    // selector for the paged navigation 
    nextSelector : '.nextPrev a',    // selector for the NEXT link (to page 2)
    itemSelector : '.infinite',       // selector for all items you'll retrieve
    loadingImg : '<?php bloginfo('template_directory'); ?>/images/loader.gif',
    donetext  : '',
    debug: true,
    errorCallback: function() { 
        // fade out the error message after 2 seconds
        jQuery('#infscr-loading').animate({opacity: .8},1000).fadeOut('normal');     
    }
},
    // call masonry as a callback

    function() { 
        //$('.removeonceloaded').hide();
        //setTimeout(function() { $('.removeonceloaded').fadeIn(500); },1000);
        //$('.post').removeClass('.removeonceloaded');
        jQuery('.older').css('display', 'none'); // hide 'older' link
        jQuery('#postwrapper').masonry({ appendedContent: jQuery(this) ,columnWidth: 10, itemSelector: '.post'});
        jFadeInit();
    }
);