Positioning divs in a circle using JavaScript

Question

I am trying to position 15 div elements evenly in a circle with a radius of 150px. I\'m using the following code, which seems to give an oddly ecce

Answer 1

Other approach without JS

chipChocolate.py's anser is pretty complete but there is an other way to achieve your aim. It is simpler and doesn't require JS.

The point is to think "circle" and rotation rather than rely on [x,y] coordinates :

You need to nest all the elements and apply a rotation to them. As they are nested the n + 1 element will rotate according to it's direct parent's rotation. Here is a DEMO :

.circle, .circle div {
    width:24px; height:300px;
    position:absolute;
    left:50%; top:50px;
}
.circle:before, .circle div:before {
    content:'';
    display:block;
    width:20px; height:20px;
    border: 2px solid black;
    border-radius: 100%;
}
.circle div {
    top:0; left:0;
    -webkit-transform : rotate(24deg);
    -ms-transform : rotate(24deg);
    transform : rotate(24deg);
}

The diameter of the circle is controled by the height of the elements (in the demo height:300px) you can make that a percentage to make the circle responsive (see below).

The rotation must be set according to the number of elements you want around the circle. In the demo 15 elements so rotation = 360 / 15 = 24deg.

If you have a dynamic number of elements, you may use JS to add them and to calculate the rotation angle needed.

---

Responsive example

DEMO

.circle{
    position:relative;
    width:5%;padding-bottom:50%;
    margin-left:47.5%;
}
.circle div {
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    -webkit-transform : rotate(24deg);
    -ms-transform : rotate(24deg);
    transform : rotate(24deg);
}
.circle:before, .circle div:before {
    content:'';
    position:absolute;
    top:0; left:0;
    width:100%; padding-bottom:100%;
    border-radius: 100%;
    border: 2px solid teal;
    background:gold;
}