title: How to use jQuery Masonry with elements of different width?
body: <p>I am implementing the jQuery Masonry plugin, but I have problems with elements wider than one column, meaning that the div width of all Masonry elements is not identical. Could anybody help me with this?</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Test&lt;/title&gt;
  &lt;script src="js/jquery-1.6.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/masonry.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;style&gt;
  .item0,.item1,.item2,.item3,.item4,.item5,.item6,.item7,.item8{float:left;  margin: 10px;
    background:#999;}
  
  .item1,.item0 {
      width:300px;
  }
  .item2 {
      width:200px;
  }
  .item3,.item8 {
      width:100px;
  }
  .item4,.item5,.item6,.item7{
      width:100px;
  }
  
  #container{
      float:left; width:1000px;
      }
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
  $(function(){
    $('#container').masonry(
    {});
  });
  &lt;/script&gt;
  &lt;body&gt;
  &lt;div id="container"&gt;
    &lt;div class="item0"&gt;1 tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf&lt;/div&gt;
    &lt;div class="item0"&gt;2 sdf sdf sdf sdf d dsfdsfds sf sdf sdfsdf &lt;/div&gt;
    &lt;div class="item1"&gt;3 sdfsdfsdf  sdf sdfsdf sdf sdfs ddsf dsf sd sdf &lt;/div&gt;
    &lt;div class="item2"&gt;4 tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf&lt;/div&gt;
    &lt;div class="item3"&gt;5 sdf sdf sdf sdf d dsfdsfds sf sdf sdfsdf &lt;/div&gt;
    &lt;div class="item4"&gt;6 sdfsdfsdf  sdf sdfsdf sdf sdfs ddsf dsf sd sdf &lt;/div&gt;
    &lt;div class="item5"&gt;7 tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf&lt;/div&gt;
    &lt;div class="item6"&gt;sdf sdf sdf sdf d dsfdsfds sf sdf sdfsdf &lt;/div&gt;
    &lt;div class="item7"&gt;sdfsdfsdf  sdf sdfsdf sdf sdfs ddsf dsf sd sdf &lt;/div&gt;
    &lt;div class="item8"&gt;tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf&lt;/div&gt;
     &lt;div class="item7"&gt;sdfsdfsdf  sdf sdfsdf sdf sdfs ddsf dsf sd sdf &lt;/div&gt;
    &lt;div class="item8"&gt;tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf  sdf dsf dsf df df df df dfs dfsdf sdf df  sdf  sdf sdf sdf&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>