0

Whew, been a while. Anyway, I've been struggling with a little experiment of mine. What I want to do involves filling a page with dynamic content and having it arranged accordingly by Masonry. Here's some of my code:

* {
    margin: 0;
    padding: 0;
}

#container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.photo { width: 25%; }

.photo img { width: 100%; }

And Masonry is called normally:

$(function() {
    $('#container').imagesLoaded(function() {
        $('#container').masonry({
            itemSelector: '.photo',
            isAnimated: false
        });
    });
});

However, when I view the page, all the photos are overlapping or there's random white space, and the content does not stretch or shrink to match the window size/screen resolution.

What I'm hoping to do is make it so that the photos can fill up the entire web page, changing size in respect to window size/screen resolution, so as to simulate a "tiled background" display. Along with this, I want to achieve a seamless positioning of the photos using Masonry (without white space of any sort). I've looked up a few examples of "grid" layouts using Masonry, but they don't seem to work when applied to my scenario.

I'd greatly appreciate any help on this!

Mike Peters
  • 38
  • 6

1 Answers1

0

You need to add "float: left" and "margin: 0 auto" in order to make them work the way you want.

.photo { width: 25%; float: left; margin: 0 auto}

http://jsfiddle.net/mastermindw/Wuwsh/2/

wakqasahmed
  • 2,059
  • 1
  • 18
  • 23