distributing div elements on a ellipse in a box, prevent overlapping and overflow

Question

I am trying to arrange a bunch of div with different size in a ellipse in a div box.

Here is what i have until yet:

http://jsfiddle.net/gz2bH/5/

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 > stage.outerHeight() / 2)
        $(this).css('top', X - $(this).outerHeight() + 'px');
    else 
        $(this).css('top', X + 'px');

    $(this).css('left', Y - $(this).outerWidth() / 2 + 'px');

});

starting point was https://github.com/addyosmani/js-shapelib/blob/master/jquery.shapelib.js

How do i prevent overlapping of the div's and overflowing the box?

Answer 1

The minor and major axes (a and b) were too small for what you were trying to accomplish. Try with this css for #stage.

#stage{
width:800px;
height:600px;
margin:2em;
float:left;
position:relative;
background:#444;

}