title: JQuery Masonry not working
body: <p>I have the code posted in JSFiddler:</p>
  
  <p><a href="http://jsfiddle.net/xWWG8/" rel="nofollow">http://jsfiddle.net/xWWG8/</a></p>
  
  <p>I cant seem to get it to work.  I had a similar problem once, but the solution to that was just a silly self closing script tags.  But I just cant seem to find what is wrong with this code.  </p>
  
  <p>also, How would I move the bottom div (The one with the text "here is some...") to the right of the other 2 divs using masonry? </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;%@ Page Title="" Language="C#" MasterPageFile="~/NCMaster.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %&gt;
  &lt;asp:Content ID="cntHeader" ContentPlaceHolderID="head" runat="server"&gt;
   &lt;script src="Scripts/jquery-2.0.3.min.js"&gt;&lt;/script&gt;
       &lt;script src="Scripts/modernizr-2.7.1.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(window).load(function () {
              var columns = 2, setColumns = function () { columns = $(window).width() &gt; 640 ? 3 : $(window).width() &gt; 320 ? 2 : 1; };
              setColumns();
              $(window).resize(setColumns);
              $('#main').masonry({ itemSelector: '.blob', columnWidth: function (containerWidth) { return containerWidth / columns; } });
          });
      &lt;/script&gt;
  &lt;/asp:Content&gt;
  
  &lt;asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"&gt;
   &lt;div id="main"&gt;
      &lt;div class="blob"&gt;
           &lt;p class="body-text"&gt;What good is a race if you dont finish in style :)
        &lt;/p&gt;
      &lt;/div&gt;&lt;br /&gt;
      &lt;div class="blob"&gt;  
          &lt;div class="test"&gt;Test&lt;/div&gt;
          &lt;div class="test"&gt;Test&lt;/div&gt;
          &lt;div class="test"&gt;Test&lt;/div&gt;
          &lt;iframe  src="//www.youtube.com/embed/NHPaXjJgzXo" frameborder="0" allowfullscreen="true" class="media"&gt;&lt;/iframe&gt;
          &lt;iframe width="75" height="75" src="//www.youtube.com/embed/NHPaXjJgzXo" frameborder="0" allowfullscreen="true" class="media"&gt;&lt;/iframe&gt;
          &lt;iframe width="75" height="75" src="//www.youtube.com/embed/NHPaXjJgzXo" frameborder="0" allowfullscreen="true" class="media"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
       &lt;div class="blob"&gt;
           Here is some more text.  I am trying to get this blob in to a new column on the right o0f the other 2 blobs
       &lt;/div&gt;
  &lt;/div&gt;
  &lt;/asp:Content&gt;
  </code></pre>