How to make content inside a circle div fitting correctly

Question

I need to implement a structure like the graph following (with HTML, CSS) and I don't have any idea how to make the content (the circles) fit inside the bigger circle.

I would appreciate any solution that solves the problem at least partially.

I added a simplified page with some basic HTML and CSS for this problem. What I need is for the content inside the div.structure to fit (see the first image).

That would be a good start for what I need.

.structure {
  float: left;
  text-align: center;
  background-color: #ccc;
  border-radius: 50%;
  margin: 20%;
  width: 60%;
  display: table;
}
.item {
  width: 50px;
  height: 50px;
  float: left;
  margin: 10px 5px;
  background-color: deeppink;
  border-radius: 50%;
  display: table-cell;
  vertical-align: middle;
}
.item.s1 {
  background-color: deeppink;
}
.item.s2 {
  background-color: green;
}
.item.s3 {
  background-color: red;
}
.item.s4 {
  background-color: blue;
}
.item.s5 {
  background-color: aqua;
}
.structura_dep.dep6 {
  background-color: gray;
}

<div class="structure">
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s1">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s2">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
  <div class="item s3">
  </div>
</div>

It is expected that you at least attempt to code this for yourself. Stack Overflow is not a code writing service. I would suggest that you do some additional research, either via Google or by searching SO, make an attempt and. if you still have trouble, come back with **your code** and explain what you have tried and why it did not work. — Paulie_D, Sep 01 '15 at 15:30
Ok, I can put the code. I thought that is something obvious and I thought that the fact I did not put code leaves a greater freedom of approach. — Madalina Taina, Sep 01 '15 at 15:33
@Paulie_D Sorry, I did not know that the code is required. In fact, the image I posted it is only a small part of what I have to do. — Madalina Taina, Sep 01 '15 at 15:37
Please review [**How to ask**](http://stackoverflow.com/help/how-to-ask) questions on Stack Overflow and what types of questions [**can be asked**](http://stackoverflow.com/help/on-topic) and what types [**should be avoided.**](http://stackoverflow.com/help/dont-ask) — Paulie_D, Sep 01 '15 at 15:38
Paulie is just giving you reference links. If you have code to share about your question, add it. If people still think your question is off-topic or too broad, it will get closed eventually. No hard feelings. — Yoshi, Sep 01 '15 at 15:49
@MadalinaTaina The reason we ask for code is so that we know exactly what you are working with. The site is geared toward answering/solving *specific* problems with existing code, We could potentially answer your question as-is, but since the question is devoid of code details, the answers would necessarily be too long (like a blog post), in order to encompass all possible implementation methods. — TylerH, Sep 01 '15 at 15:52

score 1 · Accepted Answer · edited May 23 '17 at 12:09

1

I just worked a little bit on this but i think you can get the idea you just have to add your shapes i gave you a start in the right direction though

Codepen http://codepen.io/noobskie/pen/NGqPEJ?editors=110 There is probably other better ways to complete this but this is just to give you a idea.

Ive wrapped all your colors into spans just for better orginazation.

To add a new circle all you need to do is copy ie:<a href='#' class='deg10'></a> paste it into the same span rename the class to <a href='#' class='deg20'></a> and then just change the scss accordingly.

All its using primarily is the css transform property and moving it along the page.

A good article to checkout and help you along with this could be found here Position icons into circle

edited May 23 '17 at 12:09

Community

1
1

answered Sep 07 '15 at 04:15

NooBskie

3,761
31
51

Thank you very much! I had to do this for a project with a deadline very closely, so I presented a chart easier to implement and the customer has accepted. Initially I was hoping to receive even a confirmation that is not easy to accomplish (the graph was estimated to be done in just 2-3 hours), but remained a challenge for me to find a solution and I'm so glad to see that someone has found a right direction. – Madalina Taina Sep 07 '15 at 05:11
The problem is that the circles should be grouped by color to enter some information from the database for each circle. That is why I put the question, if there is a solution to make the circles to fit into the big circle without having for each div other class. – Madalina Taina Sep 07 '15 at 05:16
Right now it is a big circle and they are grouped by color spans im not sure i understand what you mean? – NooBskie Sep 07 '15 at 05:23
if you want to not have to add background color to each circle just add it to the span i forgot to do so – NooBskie Sep 07 '15 at 05:24
Ok, but how I can make this responsive, in this form? – Madalina Taina Sep 07 '15 at 05:43
Your solution is a valid idea, but not an answer to the question, does not offer the possibility of adapting the content to circle. – Madalina Taina Sep 07 '15 at 05:46
The content must adapt for the mobile and for a big screen. It may not be possible, but if it was something simple, I could do this from the beginning. Thanks again for your solution. – Madalina Taina Sep 07 '15 at 05:49
Responsive design was not asked in your question originally, of course responsive design is possible but im not going to write out the whole thing for you. – NooBskie Sep 07 '15 at 06:01
My question is "How to make content inside a circle div fitting correctly". That means I want it to be possible to adapt content. – Madalina Taina Sep 07 '15 at 06:41

How to make content inside a circle div fitting correctly

1 Answers1