How to equally distribute elements horizontally using CSS

Question

I have eleven dots arrange horizontally using CSS. How can I evenly/equally distribute spacing between elements (mine are elements) based on the wi

Answer 1

Why not use percentages?

JsFiddle: http://jsfiddle.net/w2qfww31/

#second{
  left: 10%;
}

#third{
  left: 20%;
}

...

To answer your other question, you CAN use calculations in CSS using calc: https://developer.mozilla.org/en-US/docs/Web/CSS/calc

EDIT: As Paulie_D worked out, your solution would be something like this:

span.circle {
   height: 20px;
   width: 20px;
   border-radius: 100%;
   border: 1px solid #eee;
   background:#ffffd;
   float:left;
   cursor: pointer;
   transition: all 0.4s ease-in-out;
   margin-top: 10px;
   margin-left:calc((100% - (11*20px)) / 12);
}