Calculate margin based on elements and container size?

Question

In my snippet below, I have three circles that act as a navigation, the circles are 15px by 15px, the container is a percent and can change at any time.

I am using margin-right as a percent, and just guessing the appropriate value. What I want to know, is there a formula to calculate the appropriate margin-right so that the circles are evenly spaced from end to end, dynamic so that I can add remove circles?

Is there a better solution, I tried flex-box but I could not get it to work.

ul {
  margin: 0;
  padding: 0
}
.guide-bar {
  position: relative;
}
.guide-bar:before {
  content: "";
  position: absolute;
  height: 1px;
  top: 7px;
  width: 100%;
  background-color: #303B44;
  color: #303B44;
  z-index: -1;
}
.guide-bar ul li {
  background-color: #fff;
  cursor: pointer;
  position: relative;
  list-style: none;
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid;
  border-radius: 100em;
  margin-right: 39.56666%;
}
.guide-bar ul li:last-child {
  margin-right: 0;
}
.guide-bar ul li.active:before {
  content: "";
  position: absolute;
  height: 5px;
  width: 5px;
  background-color: #2AA1FA;
  border-radius: 100em;
  margin: auto;
  left: 0px;
  right: 0;
  top: 0;
  bottom: 0;
}
.guide-bar ul li.active:after {
  content: "";
  position: absolute;
  height: 25px;
  width: 25px;
  border: 1px solid #2AA1FA;
  border-radius: 100em;
  margin: auto;
  left: -7px;
  right: 0;
  top: 0;
  z-index: -1;
  bottom: 0;
}
.guide-bar ul li.watched {
  color: #4bd495;
  background: #4bd495;
}

<div style="width: 50%">
  <div class="guide-bar" style="top: -5px;">
    <ul>
      <li id="intro" data-step="" class="active"></li>
      <li id="howTo"></li>
      <li id="conclusion"></li>
    </ul>
  </div>
</div>

You can justify align inline-block elements with this technique: http://stackoverflow.com/questions/11589590/text-align-justify-inline-block-elements-properly - Also, you can use percentage on the `top` and `left` and then use negative `margin-top` and `margin-left` on this rule `.guide-bar ul li.active:after` to make it align from center — Mr. Duc Nguyen, Apr 09 '15 at 03:00
Wow thanks man, that worked like a charm, its all in the pseudo of the wrapper. — Michael Joseph Aubry, Apr 09 '15 at 03:14

score 1 · Accepted Answer · edited May 23 '17 at 11:50

You can justify align inline-block elements with this technique: "text-align: justify;" inline-block elements properly?

Also, you can use percentage on the top and left and then use negative margin-top and margin-left on this rule .guide-bar ul li.active:after to make it align from center

Also, for drawing circle with border-radius, set it to 50%...

have a look here: http://jsfiddle.net/2vcuxt4k/2/

.guide-bar ul {
  text-align: justify;
}
.guide-bar ul:before {
  content: '';
  display: block;
  width: 100%;
}
.guide-bar ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}
.guide-bar ul li.active:before {
  content: "";
  position: absolute;
  height: 5px;
  width: 5px;
  background-color: #2AA1FA;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-top: -2.5px;
  /* half the size of the circle, including the border */
  margin-left: -2.5px;
}
.guide-bar ul li.active:after {
  content: "";
  position: absolute;
  height: 25px;
  width: 25px;
  border: 1px solid #2AA1FA;
  border-radius: 50%;
  z-index: -1;
  top: 50%;
  left: 50%;
  margin-top: -13.5px;
  /* half the size of the circle, including the border */
  margin-left: -13.5px;
}

Calculate margin based on elements and container size?

1 Answers1