title: distributing div elements on a ellipse in a box, prevent overlapping and overflow
body: <p>I am trying to arrange a bunch of div with different size in a ellipse in a div box.</p>
  
  <p>Here is what i have until yet:</p>
  
  <p><a href="http://jsfiddle.net/gz2bH/5/" rel="nofollow">http://jsfiddle.net/gz2bH/5/</a></p>
  
  <pre><code>var stage = $('#stage');
  $('#middle').css('top', stage.outerHeight() / 2 - $('#middle').outerHeight() / 2 + 'px');
  $('#middle').css('left', stage.outerWidth() / 2 - $('#middle').outerWidth() / 2 + 'px');
  
  drawEllipse(".block", stage.outerHeight() / 2, stage.outerWidth() / 2, stage.outerHeight() / 2, stage.outerWidth() / 2, 360);
  
  function drawEllipse(selector, x, y, a, b, angle) {
  var steps = $(selector).length;
  
  var i = 0;
  var beta = -angle * (Math.PI / 180);
  var sinbeta = Math.sin(beta);
  var cosbeta = Math.cos(beta);
  
  $(selector).each(function(index) {
      i += (360 / steps);
      var alpha = i * (Math.PI / 180);
      var sinalpha = Math.sin(alpha);
      var cosalpha = Math.cos(alpha);
      var X = x + (a * cosalpha * cosbeta - b * sinalpha * sinbeta);
      var Y = y + (a * cosalpha * sinbeta + b * sinalpha * cosbeta);
  
  
      X = Math.floor(X);
      Y = Math.floor(Y);
      if (X &gt; stage.outerHeight() / 2)
          $(this).css('top', X - $(this).outerHeight() + 'px');
      else 
          $(this).css('top', X + 'px');
  
      $(this).css('left', Y - $(this).outerWidth() / 2 + 'px');
  
  });
  </code></pre>
  
  <p>starting point was <a href="https://github.com/addyosmani/js-shapelib/blob/master/jquery.shapelib.js" rel="nofollow">https://github.com/addyosmani/js-shapelib/blob/master/jquery.shapelib.js</a></p>
  
  <p>How do i prevent overlapping of the div's and overflowing the box?</p>