jquery - Two column masonry with single gutter -

i have created following codepen: http://codepen.io/anon/pen/wmjhy

the idea being have 2 column masonry of boxes should have 20px of spacing in between them. have set box-sizing border-box ignore border , inner padding of each item.

however second column collapsing under first... presumably because 50% , 20px on both boxes (left , right) adding it.

any ideas on how fix this?

i've looked @ perhaps doing:

'columnwidth': $('.masonry').width() / 2 , having .item set 100% in css doesn't seem work either... perhaps because gutter appending right column boxes too?

js:

$(document).ready(function(){    $('.masonry').masonry({     'itemselector': '.item',     'gutter': 20     });  }); 

css:

* {   -webkit-box-sizing: border-box;      -moz-box-sizing: border-box;           box-sizing: border-box; }  body {     margin: 0;   font-family: sans-serif;   padding: 20px; }  .masonry {   background: #ff0000; }  .masonry .item {   width:  50%;   height: 100px;   float: left;   background: #eeeeee;   border: 1px solid #333;   margin-bottom: 20px; } 

html:

<div class="masonry">   <div class="item"></div>   <div class="item"></div>   <div class="item"></div>   <div class="item"></div>   <div class="item"></div>   <div class="item"></div>   <div class="item"></div>   <div class="item"></div>   <div class="item"></div>   <div class="item"></div> </div> 

if add following $(document).ready

  $(window).on("resize load", function() {     var desired_width = $(".masonry").width()/2 - 10     $('.masonry .item').css("width", desired_width)   }) 

it should give result want.