Circles around a parent div javascript issue

Question

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;
}

<div id="parentdiv"></div>
<div class="container">
  <input type="checkbox" id="test1">
  <div class="circle">
    <label for="test1" class="inner">Test 1</label>
  </div>
  <input type="checkbox" id="test2">
  <div class="circle">
    <label for="test2" class="inner">Test 2</label>
  </div>
  <input type="checkbox" id="test3">
  <div class="circle">
    <label for="test3" class="inner">Test 3</label>
  </div>
  <input type="checkbox" id="test4">
  <div class="circle">
    <label for="test4" class="inner">Test 4</label>
  </div>
  <input type="checkbox" id="test5">
  <div class="circle">
    <label for="test5" class="inner">Test 5</label>
  </div>
  <input type="checkbox" id="test6">
  <div class="circle">
    <label for="test6" class="inner">Test 6</label>
  </div>
</div>

JSFiddle Demo

Answer 1

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).

Answer 2

your margin on the parent div seems off. Also I would probably try put the "parentdiv" as a child of the container. is no parent div if it's not a parent anyways.