How do I move around a div inside of a circular div?

Question

So, I have the following code snippet from codepen.io, where I am trying to create a Simon game. I have created the basic outline for the shapes of the game but I am trying to relocate a div inside of a the circular div I have created at the center of the whole figure. But, for some reason, the div refuses to move no matter what I do. Can anybody tell me why that is?

http://codepen.io/redixhumayun/pen/JKryAZ?editors=1100

Here's the specific code snippet for the div I am trying to move.

.count{
width:75px;
background-color:orange;
border-radius:25%; !important
margin:100px auto 0px 20px;
}

you want orange element to be center right ? – Ismail Farooq Jul 15 '16 at 10:51 — Ismail Farooq, Jul 15 '16 at 10:51
Position it just like you did everything else. – Paulie_D Jul 15 '16 at 10:51 — Paulie_D, Jul 15 '16 at 10:51

score 0 · Answer 1 · answered Jul 15 '16 at 10:53

try this one:

.game{
  height:500px;
  width:600px;
  background-color:violet;
  margin:0px auto;
  transform: translateY(5%);
  border-radius:0px; !important
}
div{
  width:200px;
  height:200px;
  background-color:#ccc;
  border-radius:100px;
}
#center{
  border: solid #fff 1px;
  margin: 0px auto 0px auto;
  -webkit-transform: translateY(75%);
  position:relative;
}
#tl, #tr, #bl, #br{
  height:200px;
  width:200px;
  position:absolute;
  z-index:-1;
}
#tl{
  border-radius:200px 0 0 0;
  background-color:yellow;
  margin:-152.5px auto 0px 95px;
}
#tr{
  border-radius:0 200px 0 0;
  background-color:blue;
  margin:-152.5px auto 0px 305px; 
}
#bl{
  border-radius:0 0 0 200px;
  background-color:green;
  margin:52.5px auto 0px 95px;
}
#br{
  border-radius:0 0 200px 0;
  background-color:red;
  margin:52.5px auto 0px 305px;
}
.count{
  height:50px;
  width:75px;
  background-color:orange;
  border-radius:25%; !important
  margin:100px auto 0px 20px;
      margin:75px auto;

}

DEMO HERE

So, I'm curious about why you needed the extra margin-left and margin-top statements in there. Why didn't the single "margin:top right bottom left" statement suffice to reposition the div as I needed? — random_coder_101, Jul 15 '16 at 10:57

score 0 · Answer 2 · answered Jul 15 '16 at 10:53

0

Add the following css in .count

.count{
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

Demo

answered Jul 15 '16 at 10:53

Ismail Farooq

6,309
1
27
47

How do I move around a div inside of a circular div?

2 Answers2