Jim Yi

After I read this article on Smashing Magazine (also CSS-Tricks), I didn’t really find any of those solutions acceptable since they require extra markup. I want to be able to have objects equal spaced just using code like this:

  <div id="container">
    <img src="circle1.png" alt="" />
    <img src="circle2.png" alt="" />

    <img src="circle3.png" alt="" />
    <img src="circle4.png" alt="" />
  </div>

Using the property text-align: justify by itself will not work because the last line of paragraphs aren’t justified – so when you have only one line, justification does nothing. With CSS3, there’s a property called text-justify that lets you specify how you want the text justified. Using text-justify: distribute-all-lines, the last line of a paragraph will be justified. So with the following CSS applied to the “container” above, we can achieve equal spacing objects.

  #container {
    text-align: justify;
    text-justify: distribute-all-lines;
  }

The only problem: since text-justify is a part of CSS3, support for it isn’t widely available. This won’t work on Firefox 3.0.8, Opera 9.64, Safari 3.2.2, and Google Chrome. The browsers that it does work on: Internet Explorer 5.5, 6, and 7 (I don’t have 8 installed to try).

Live demo here.