title: Masonry not working with dynamic content
body: <p>Masonry is not working with my dynamic content, I don't know why. I don't think it's a bug on my side, at least I've looked at the code for a few hours now and I can't find anything that isn't working.</p>
  
  <pre><code>//reads listbox.php and cycles through the array calling createbox
  function listboxs() {
      $.ajax({
          url: '_php/listbox.php',
          success: function (output) {
  
              var jsonArray = $.parseJSON(output);
  
              $.each(jsonArray, function (i, box) {
                  createbox(box.id, box.name, box.link, box.description, box.tags);
              });
          }
      });
  }
  
  //create the code for 1 box
  function createbox(id, name, link, description, tags) {
  
      var boxHtml = "",
          tagsHtml = "",
          descriptionHtml = "";
  
      boxHtml = '' + '&lt;div class="box" id="' + id + '"&gt;' + '&lt;div class="boxinfo"&gt;' + '&lt;label class="boxname"&gt;&lt;a href="' + link + '" class="boxlink" target="_blank"&gt;' + name + '&lt;/a&gt;&lt;/label&gt;';
  
      $.each(tags, function (i, tag) {
          tagsHtml += '&lt;label class="boxtag"&gt;' + ((!tag.name) ? tags[i] : tag.name) + '&lt;/label&gt;';
      });
  
      //if(description.trim().length &gt; 0){
      descriptionHtml = '&lt;textarea class="boxdescription" readonly rows="1"&gt;' + description + '&lt;/textarea&gt;';
      //}
  
      boxHtml += tagsHtml + '&lt;/div&gt;' + descriptionHtml + '&lt;/div&gt;';
  
      $content.html($content.html() + boxHtml);
  }
  </code></pre>
  
  <p>Below is the simplified HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
      &lt;head&gt;
          &lt;link rel="stylesheet" type="text/css" href="_css/index.css" /&gt;
          &lt;link href='http://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet'
          type='text/css'&gt;
          &lt;link href='http://fonts.googleapis.com/css?family=Rosario' rel='stylesheet'
          type='text/css'&gt;
          &lt;script src="_resources/jquery-2.0.3.min.js" type="text/javascript" language="javascript"&gt;&lt;/script&gt;
          &lt;script src="_resources/masonry.pkgd.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" language="javascript"&gt;
              $('#content').masonry();
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="content" class="js-masonry"&gt;&lt;/div&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I know that I don't need the inline javascript calling masonry on content but it's one of my many tests...</p>
  
  <p>Below is part of the CSS:</p>
  
  <pre><code>#content{
  padding: 15px;
  min-height: 400px;
  }
  
  /*
  ################################
  box
  */
  
  .box{
  border: 1px solid black;
  float: left;
  padding: 5px;
  background: #F0F0F0;
  margin-left: 5px;
  margin-bottom: 5px;
  }
  
  .boxinfo{
  border-bottom: 1px solid black;
  }
  
  .boxname{
  font-weight: bold;
  }
  
  .boxdescription{
  border: none;
  outline: none;
  background: white;
  overflow: hidden;
  }
  
  .boxtag{
  margin-left: 5px;
  }
  
  #boxdecoy{
  height: 45px;
  }
  
  .boxname, .boxtag, .boxdescription{
  font-family: 'Rosario', sans-serif;
  font-size: 12px;
  }
  
  .boxlink{
  text-decoration: none;
  color: black;
  }
  
  .boxlink:hover{
  text-decoration: underline;
  }
  </code></pre>
  
  <p>I'm really going crazy with all of it because I tested creating boxes by hand (this means writting in the html) in content, and if i do masonry works fine. If i create them through the function that you see there it doesn't work... i call listboxs right in the begining of the javascript file after I declare all my vars...</p>
  
  <p>Hope I was clear and you can help me.</p>