How can I position 3 elements into 3 sections of a circle

Question

I tried this: https://jsbin.com/qidesiqada/edit?html,output

also pasted here:

   <html>

  <head>
<style>
p.two {
    float: right;
    color: white;
    font-family: Century Gothic, sans-serif;
    font-size:20px;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
p.one {
    float: left;
    font-family: Century Gothic, sans-serif;
    color: white;
    font-size:27px;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
p.three {
    text-align: center;
    margin-top: 12px;
    font-family: Century Gothic, sans-serif;
    color: white;
    font-size:20px;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

#container {
width:45px;
}
  p { margin: 0; }

</style>

    </head>
  <body>
    <div id="container">
<p class="one">1</p><p class="two">20</p><br>
      <p class="three">3</p></div>
</body>
</html>

however, when 1 element is large than the other, it shoves the other ones out of the way. Note how the big 1 shoves the little 3 slightly to the right. This is what I want to avoid

I want each element to be exactly in the same place no matter the size of the font or the size of the others. So it would seem that position-absolute would do this, right? But no, When I use position-absolute on that bottom element, it doesn't center in the div. When I use tricks like transform: translate(-50%, -50%); it move it half way across the screen as though its ignoring the fact that it exists inside of the container div.

Any help on this? Thanks!

this is where the numbers are supposed to fit. You'll notice that even here they are slightly off, but you can get the general idea. The "pie chart" on the back is not part of the desired affect. I simply wish to show that each number should be positioned in one of the quadrants.

Please post an image showing how you want it to look like, as now it's really difficult to understand. — Asons, Jan 08 '16 at 20:39
Check out this answer: http://stackoverflow.com/a/14394912/2827823 — Asons, Jan 08 '16 at 20:56
Possible duplicate of [HTML5 Canvas pie chart](http://stackoverflow.com/questions/6995797/html5-canvas-pie-chart) — Asons, Jan 08 '16 at 20:56
it seems that image may have added confusion. I don't care about the underlying pie chart. That was simply to show where the numbers should go. I only care about the positioning of the numbers. — BigBoy1337, Jan 08 '16 at 20:58

micah · Accepted Answer · 2016-01-08T20:59:25.083

There's a few things going on in your question so I'll answer what I think will be the most help to you (also not entirely sure what you're doing).

The reason #3 is centering to the body instead of the div is because absolute position is relative to the first dom it finds up the tree with absolute or relative positioning. Since the parent dom element has the default static positioning it is positioned relative to the body.

css-

#container { position: relative; }

jsbin-

https://jsbin.com/hamepicage/1/edit?html,output

Edit:

Closer what what you're trying to achieve. Use absolute position on all elements so their bounding boxes don't collide. Instead of float: left; use:

left: 0;

Instead of float: right; use:

right: 0;

And for the centering you can calculate the center if you know the width.

calc(50% - 12px);

Or make it width: 100%; and center align the text.

text-align: center;
width: 100%;

Also, don't forget to give your container div a height.

https://jsbin.com/tovopiseqe/1/edit?html,output

that jsbin is not quite the intended affect. I attached and image to the original question to explain better what i am looking for. — BigBoy1337, Jan 08 '16 at 20:49

How can I position 3 elements into 3 sections of a circle

1 Answers1