Overlapping 1 px Borders making a thicker border

Question

Is there a way, when I have over lapping (touching) div's, to make the 1px border not become 2 pixels. And I know I could just put a border on 2 of the sides, but then the one edge of the div wouldn't have a border. By the way, I'm using jQuery Masonry.

Answer 1

yes the div on the right would look something like this

     border: 1px solid #fff;
     border-left: none;

the second border-left will override the left border that was just put on there

EDIT:

ok, since youre using jQuery masonary - do it like this

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

the overlapping method I mentioned will work

Answer 2

Combining borders and margins (even with border-box) is tricky because your layout depends on the container width. It is better to add a child to the element positioned by Masonry and style that...

.container .post {
   float: left;
   width: 240px;
}

.container .text {
    outline: 1px solid #999;
    padding: 10px;
    margin: 0 1px 1px 0;
}

outline allows the border to appear "outside" the div which makes them easier to overlap

http://jsfiddle.net/4xmUY/

(if you happen to use this answer please accept Scott's answer as this should be a comment on his answer but the explanation doesn't fit there).