title: Dividing area into a given number of squares
body: <p>I have a DIV Element that can be resized by the user. Into this DIV I want to draw a given number of squares. Now I need to find out, what the perfect side length for the square would be so that all fit into the DIV without overflowing.</p>
  
  <p>This is what I got so far:</p>
  
  <pre><code>function CalcSize (){
      var number = 23; // Example-Number
      var area = jQuery('#container').height() * jQuery('#container').width();
      var elementArea = parseInt(area / number);
      var sideLength = parseInt(Math.sqrt(elementArea));
      return sideLength;
  }
  </code></pre>
  
  <p>This makes the squares too big since it does not "throw away" the space that cannot be filled with the squares. By searching for this problem I found the <a href="http://en.wikipedia.org/wiki/Packing_problem" rel="nofollow noreferrer">Packing Problem</a> and Treemapping but both did not help me with my problem, since honestly I lack the math skills and from what I understand the solutions allow things like non-squares and rotations.</p>
  
  <p>Thanks!</p>
  
  <p><strong>Update:</strong></p>
  
  <p>I currently use a very crude method to resize the squares by constantly resizing them and looking if they overflow. This method gives me the correct result but is quite bad on the performance. I am sure that this can be achieved by calculations.</p>
  
  <p><img src="https://i.stack.imgur.com/ZgAvY.jpg" alt="Link to a screenshot"></p>