jQuery full width / percantages

Adapted from http://stackoverflow.com/questions/8446061/jquery-masonry-with-percentage-width/10990011#10990011

HTML

<script src="https://npmcdn.com/masonry-layout@4.0.0/dist/masonry.pkgd.min.js"></script>
<script src="https://npmcdn.com/imagesloaded@4.1.0/imagesloaded.pkgd.min.js"></script>
	<div id="boxes" class="masonry clearfix">
		<div class="box box-fw" style="background: cyan;">
			<div class="inner">
			<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
			</div>
		</div>
		<div class="box" style="background: magenta;">
			<div class="inner">
			<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
			</div>
		</div>
		<div class="box" style="background: yellow;">
			<div class="inner">
			<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
			</div>
		</div>
		<div class="box" style="background: grey;">
			<div class="inner">
			<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
			</div>
		</div>
	</div>

CSS

.box{
		width: 50%;
    box-sizing:border-box;
	}
  
  .box-fw{
    width:100%
  }

JavaScript

$(function(){
		var container = $('#boxes');

		container.imagesLoaded(function(){  
			//console.log( "Images loaded!" );
			container.masonry({
			   itemSelector: '.box',
				isAnimated: true
			});
		});
	});