html - Circles around a parent div javascript issue

I am trying to have a parent div and x amount of circles around it. In the example I created... I am trying to get 6 circles around it. they all form a circle but not around the parent div. What am I doing wrong?

var div = 360 / 6;
var radius = 150;

var parentdiv = document.getElementById('parentdiv');
var offsetToParentCenter = parseInt(parentdiv.offsetWidth / 2); //assumes parent is square
var offsetToChildCenter = 20;
var totalOffset = offsetToParentCenter - offsetToChildCenter;
var elementList = document.querySelectorAll(".circle");
for (var i = 0; i <= elementList.length; i++) {
  elementList[i].style.position = 'absolute';
  var y = Math.sin((div * i) * (Math.PI / 180)) * radius;
  var x = Math.cos((div * i) * (Math.PI / 180)) * radius;
  elementList[i].style.top = (y + totalOffset).toString() + "px";

  elementList[i].style.left = (x + totalOffset).toString() + "px";
}

.container label {
  cursor: pointer;
  height: 150px;
  width: 150px;
  display: table-cell;
  text-align: center;
  padding: 20px 10px 10px 20px;
  vertical-align: middle;

  border-radius: 50%;
  background: green;
}

.container input[type="checkbox"] {
  display: none;
}

#parentdiv {
  position: relative;

  width: 150px;
  height: 150px;
  background-color: #ac5;
  border-radius: 150px;
  margin: 150px;
}

.div2 {
  position: absolute;
  width: 40px;

  height: 40px;
  background-color: #ac5;
  border-radius: 100px;
}

  
  

    Test 1
  

  
  

    Test 2
  
  
  

    Test 3
  
  
  


    Test 4
  
  
  

    Test 5
  
  
  

    Test 6
  

JSFiddle Demo

Answer

I have gone through your code and I had the doubts following:

1. why you are using padding in the container class? - I suppose it make the children circles bigger than the parent circle. If you are dividing 360 degrees to the number of children (6), the children circle could be the same height and width of the parent circle.


2. why var offsetToChildCenter = 20;? - If container class have the attributes "height: 150px;
   width: 150px;", then I guess you could change this line to var offsetToChildCenter = 75


3. why you are subtracting offsetToChildCenter to offsetToParentCenter (var totalOffset = offsetToParentCenter - offsetToChildCenter;)? - In this line, I hope you could change to var totalOffset = offsetToParentCenter + offsetToChildCenter;

So, with these changes, the source code will become:

.container label {

  cursor: pointer;
  height: 150px;
  width: 150px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background: green;
}

Javascript:

var div = 360 / 6;
var radius = 150;
var parentdiv = document.getElementById('parentdiv');
var offsetToParentCenter = parseInt(parentdiv.offsetWidth / 2); //assumes parent is square
var offsetToChildCenter = 75;
var totalOffset = offsetToParentCenter + offsetToChildCenter;
var elementList = document.querySelectorAll(".circle");

for (var i = 0; i <= elementList.length; i++) {
  elementList[i].style.position = 'absolute';
  var y = Math.sin((div * i) * (Math.PI / 180)) * radius;
  var x = Math.cos((div * i) * (Math.PI / 180)) * radius;
  elementList[i].style.top = (y + totalOffset).toString() + "px";
  elementList[i].style.left = (x + totalOffset).toString() + "px";
}

At least, after all, the children circle will not round the parent circle exactly, it's likely due to rounding errors in the IEEE-754 double format (https://stackoverflow.com/a/9652699/7113404).