Question

I currently am using masonry plugin with jquery. I have a few boxes. I want to be able to create boxes where they touch and have no space. Now I’m trying to create borders around these containers, but when I do

border:thin solid black;

in css, it borders around everything. So if there are containers next to each other, it will pretty much border double. Unless there’s a way to have the containers overlap each other so the border lines will just line up right on top of each other. So far it just either makes the container go to next row, or i would have to widen the width so it shows the double lines.

Any suggestions?

Thank you

EDIT:

        $container.masonry({
            itemSelector: '.container',
            columnWidth: 1,
            isFitWidth: true,
            position:'relative',
            animationOptions: 
            {
                    duration: 750,
                    easing: 'linear',
                    queue: false
            }
        });

Answer 1

Just change your css like this:

#main {
    width:300px;

}
.container {
width:50px;
height:80px;
border:1px solid black;
margin-right: -1px;
margin-bottom: -1px;
}

here the demo : http://jsfiddle.net/ongisnade/wsk7C/6/