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

Put all the spans in a div and give it display: flex:

.flexdiv{
    display: flex;
}

<div class='flexdiv'>
    <span>span</span>
    <span>span</span>
    <span>span</span>
    <span>span</span>
    <span>span</span>
    <span>span</span>
</div>

Answer 2

Equally Spacing HTML Elements using Justify - works on older browsers

Here's an easy browser compatible solution taken from thirtydot's great answer to a similar question: Fluid width with equally spaced DIVs

This handy solution uses text-align:justify on the container, and display:inline-block on the circle divs. Not only do inline-block elements respond to the text-align justify, they can have width and height too.

It's nice because as the browser window shrinks, the circle divs will justify when they wrap to the next line. If you don't want the circle divs to wrap to the next line, just set a min-width on the container.

1. Remember for this to work, each div needs its own line like the code below, or there needs to be a space in-between the tags. If you run your divs together like (<div>1</div><div>2</div>), it won't work.

2. Inline-block will add a small bit of margin by default. You can add a bit of negative margin to remove the space.

3. It needs the stretch span.

4. The css with the * in front is for IE7 and below, and _ is for IE6. These are safe fixes, but if your stylesheet is compliant, then add them to your older IE stylesheet. Note: You can create a stylesheet that only older versions of IE can see by wrapping the link in an IE conditional comment like - <!--[if lte IE 7]><link href="media/stylesheet/internet-explorer.css" rel="stylesheet" type="text/css"><![endif]-->, and place this link after your regular stylesheets.

JSFiddle

---

<div class="container">
    <div id="first" class="circle"></div>
    <div id="second" class="circle"></div>
    <div id="third" class="circle"></div>
    <div id="fourth" class="circle"></div>
    <div id="five" class="circle"></div>
    <div id="six" class="circle"></div>
    <div id="seven" class="circle"></div>
    <div id="eight" class="circle"></div>
    <div id="nine" class="circle"></div>
    <div id="ten" class="circle"></div>
    <span class="stretch"></span>
 <div>

CSS

 .container {
    text-align:justify;
    -ms-text-justify:distribute-all-lines;
    text-justify:distribute-all-lines;
   /* min-width:260px;
      _width:260px;  add min-width if you want the circle divs to stay on one line with a scrollbar */
    padding: 45px 0px 0px 0px;
}

div.circle {
   height:20px;
   width:20px;
   vertical-align:top;
   display:inline-block;
   *display:inline;
   *zoom:1;
   border-radius:100%;
   border:1px solid #eee;
   background:#ffffd;
   cursor:pointer;
   transition:all 0.4s ease-in-out;
  }

.stretch {
    width:100%;
    display:inline-block;
    font-size:0;
    line-height:0;
}

Answer 3

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);
}

Answer 4

Slight cheat...using JS

See my JSfiddle

var childArray = document.getElementById('bullets').children;

left = 190;
for (var i = 0; i < childArray.length; i++)
{
    var cur_left = (i*left).toString();
    childArray[i].style.left = cur_left+"px";
}

Answer 5

Using flexbox, you can do something like this:

.parent {
    display: flex;
    justify-content: space-between;
}

span.circle {
  height: 20px;
  width: 20px;
  border-radius: 100%;
  border: 1px solid #eee;
  background:#ffffd;   
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}

<div class="parent">
    <span id="first" class="border-change circle"></span>
    <span id="second" class="circle"></span>
    <span id="third" class="circle"></span>
    <span id="fourth" class="circle"></span>
    <span id="five" class="circle"></span>
    <span id="six" class="circle"></span>
    <span id="seven" class="circle"></span>
    <span id="eight" class="circle"></span>
    <span id="nine" class="circle"></span>
    <span id="ten" class="circle"></span>
    <span id="eleven" class="circle"></span>
</div>

JSFiddle Demo

Answer 6

If you don't have a problem to change the layout then use it like below.

HTML

  <div class="test">
    <div><span id="first" class="border-change circle"></span></div>
    <div><span id="second" class="circle"></span></div>
    <div><span id="third" class="circle"></span></div>
    <div><span id="fourth" class="circle"></span></div>
    <div><span id="five" class="circle"></span></div>
    <div><span id="six" class="circle"></span></div>
    <div><span id="seven" class="circle"></span></div>
    <div><span id="eight" class="circle"></span></div>
    <div><span id="nine" class="circle"></span></div>
    <div><span id="ten" class="circle"></span></div>
 <div>

CSS

  span.circle {
   height: 20px;
   width: 20px;
   border-radius: 100%;
   border: 1px solid #eee;
   background:#ffffd;
   cursor: pointer;
   display:inline-block;
   transition: all 0.4s ease-in-out;
  }
 .test div{display:table-cell; width:auto; text-align:center;}
 .test{display:table; width:100%;}

FIDDLE DEMO