How to arrange div structure with radius using CSS - html

Question

I am trying to create HTML page shown in this sample image.
I want to place other component on top of this black and maroon circles. For this I am using tag Structure of div and span. And using span background-image to apply this image as background.
My problem is what will be structure of div and span to arrange black circle on radius of div/span tags containing maroon circle as background.
Till now I have center circle placed. I don't know how to arrange other circles around it
div.table-text {
position: fixed;
top: 20%;
left: 20%
}
span.table-text {
position: inherit;
display: block;
width: 60%;
height: 60%;
background-image: url(../images/table-text.png);
background-position: bottom;
background-repeat: no-repeat;
}
<div class="table-text">
<span class="table-text">
</span>
</div>

Answer 1

Im not sure I understood the question, but I'll try to answer.
You can't use something like cos() to arrange elements on HTML, you will have to use negatives margin-top: or position: absolute;
My advise: use negative margins, for the black dots on the left and right.
Edit: I did your job, now pay me! #:
.circle {
display: inline-block;
border-radius: 200px;
position: absolute;
width: 100px;
height: 100px;
background-color: black;
}
#bigCircle {
border-radius: 200px;
width: 400px;
height: 400px;
margin: 0 auto;
background-color: brown;
}
#bottom {
margin: 50px calc(50% - 50px);
}
#left {
margin: -50px calc(25% - 50px);
}
#right {
margin: -50px calc(75% - 50px);
}
<div id="bigCircle"></div>
<div class="circle" id="left"></div>
<div class="circle" id="bottom"></div>
<div class="circle" id="right"></div>
JSFiddle - DEMO

Answer 2

Without knowing the rest of your document structure, I've thrown together this proof of concept for you using absolute positioning which should, hopefully, point you in the right direction.
If you need clarification on anything or any of it doesn't suit your needs, please let me know and I'll attempt to update it accordingly.
*{
box-sizing:border-box;
color:#fff;
font-family:sans-serif;
}
.top{
background:red;
border-radius:50%;
margin:-10% auto 0;
padding:0 0 75%;
position:relative;
width:75%;
}
div>div{
background:green;
border-radius:50%;
overflow:hidden;
padding:0 0 20%;
position:absolute;
width:20%;
}
div.one{
left:-10%;
top:80%;
}
div.two{
left:40%;
top:103%;
}
div.three{
right:-10%;
top:80%;
}
p{
text-align:center;
position:absolute;
margin:0;
width:100%;
}
.top>p{
top:15%
}
.top>div>p{
top:5%;
}
<div class="top">
<p>top</p>
<div class="one">
<p>one</p>
</div>
<div class="two">
<p>two</p>
</div>
<div class="three">
<p>three</p>
</div>
</div>

Answer 3

I think you want like here
for responsive you can use value in percentages or max-width.
<div class="maroon">
<div class="m-child m-child1"></div>
<div class="m-child m-child2"></div>
<div class="m-child m-child3"></div>
<div class="m-child m-child4"></div>
</div>
.maroon{
max-width: 300px;
max-height:300px;
background:maroon;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.m-child, .maroon{
position: absolute;
border-radius:100%;
}
.m-child{
background: #000;
width:100px;
height:100px;
}
.m-child1{
left: -50px;
top:0;
bottom: 0;
margin: auto;
}
.m-child2{
right: -50px;
top:0;
bottom: 0;
margin: auto;
}
.m-child3{
top: -50px;
left: 0;
right:0;
margin: auto;
}
.m-child4{
bottom: -50px;
left: 0;
right:0;
margin: auto;
}

Answer 4

I think you need something like following: You can make changes as per your requirement.
.middle_circle {
background: none repeat scroll 0 0 red;
border-radius: 100%;
height: 200px;
left: 220px;
position: absolute;
top: 60px;
width: 200px;
}
.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%; background:black;
}
<div class="circle">
<div><div><div><div><div><div><div><div><div><div><div><div><div><div><div>
</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
</div>
<div class="middle_circle"></div>
Check Fiddle.