Equidistant Objects with CSS - CSS-Tricks

Equidistant Objects with CSS - CSS-Tricks - this is useful!
Example

FAIL: Give each object a percentage left position

<img src="images/shape-red.png" class="first-r">
<img src="images/shape-green.png" class="second-r">
<img src="images/shape-yellow.png" class="third-r">
<img src="images/shape-blue.png" class="fourth-r">

img.first-r { left: 0%; position: relative; }
img.second-r { left: 25%; position: relative; }
img.third-r { left: 50%; position: relative; }
img.third-r { left: 75%; position: relative; }

FAIL: Give the objects a common left percentage margin

<span class="do-not-wrap">
 <img src="images/shape-red.png">
 <img src="images/shape-green.png" class="mover">
 <img src="images/shape-yellow.png" class="mover">
 <img src="images/shape-blue.png" class="mover">
</span>
img.mover {
 margin-left: 15%;
}

FAIL: Just use a table!

<table>
 <tr>
  <td class="leftalign">
   <img src="images/shape-red.png">
  </td>
  <td>
   <img src="images/shape-green.png">
  </td>
  <td>
   <img src="images/shape-yellow.png">
  </td>
  <td class="rightalign">
   <img src="images/shape-blue.png">
  </td>
 </tr>
</table>

PASS: First on the left, float the rest right in equal size boxes

<img src="images/shape-red.png">
<div id="movers-row">
 <div><img src="images/shape-green.png"></div>
 <div><img src="images/shape-yellow.png"></div>
 <div><img src="images/shape-blue.png"></div>
</div>
#movers-row {
 margin: -120px 0 0 120px;
}
#movers-row div {
 width: 33.3%;
 float: left;
}
#movers-row div img {
 float: right;
}