title: Appending elements - stop appending when elements starts to overflow the container
body: <p>Im trying to sort out a "board" where you can add elements in various sizes using masonry, and im trying to figure out how to stop the possibility to append new elements if the container is full and elements starts to overflow it.</p>
  
  <p>The code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;input id="width" value="0" type="text"&gt;&lt;/input&gt;
  &lt;input id="height" value="0" type="text"&gt;&lt;/input&gt;
  &lt;input id="mLeft" value="0" type="text"&gt;&lt;/input&gt;
  &lt;input id="mRight" value="0"type="text"&gt;&lt;/input&gt;
  &lt;button&gt;Add container&lt;/button&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$('button').click(function(){
      var $pWidth = jQuery("#width").val();
      var $truePWidth = $pWidth * 15;
      var $pHeight = jQuery("#height").val();
      var $truePHeight = $pHeight * 15;
      var $mLeft = jQuery("#mLeft").val();
      var $trueMLeft = $mLeft * 15;
      var $mRight = jQuery('#mRight').val();
      var $trueMRight = $mRight * 15;
      $container.append("&lt;div class='box'&gt;&lt;div class='remove'&gt;&lt;/div&gt;&lt;/div&gt;").masonry( 'reload', function(){
             $(".box").each(function(i) {
                   $(this).attr("id", "item"+(i+1));
              });
          $($container).children('.box:last-child').css({'height' : $truePHeight + 'px', 'width': $truePWidth + 'px', 'margin-right' : $trueMRight + 'px', 'margin-left' : $trueMLeft + 'px' });
          $container.masonry( 'reload');
      } );
  
  });
  </code></pre>
  
  <p>The container(var $container = #container), where the elements (.box) are added is 1600px high.</p>
  
  <p>Thanks in advance!</p>
  
  <p>/Jonas</p>