jquery - Why doesn't isotope fill the row in this simple layout? -

i have simple layout-- 3 colored boxes follow 1 after in code, designed fill fixed-width div. why doesn't isotope bring blue box next green box? goal have boxes fill of space possible.

the code super straightforward:

<style> .video {     width:435px;     height:265px;     margin:20px;     background-color:yellow; } .tweet {     width:200px;     height:165px;     background-color:green; } .post {     width:206px;     height:260px;     background-color:blue; } #iso {     width:970px;     border:solid 1px red; } </style>  <div id='iso'>     <div class='b video'></div>     <div class='b tweet'></div>     <div class='b post'></div>     <div class='b video'></div>     <div class='b tweet'></div>     <div class='b post'></div>     <div class='b video'></div>     <div class='b tweet'></div>     <div class='b post'></div> </div>  $(function () {     $('#iso').isotope({         itemselector: '.b',         layoutmode: 'masonry'     }); }); 

feel free play here:

http://jsfiddle.net/pnoeric/jn3ux/4/

try using:

$('#iso').isotope({     itemselector: '.b',     layoutmode: 'fitrows' }); 

i think effect you're trying achieve.

fiddle: http://jsfiddle.net/jn3ux/5/