Equal Spaced Objects with CSS


Equally Spaced Objects

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.


3 Comments

alex on Sunday, September 06, 2009 (9:26AM)

why the hell does css3 work in IE 5.5 … I guess its been around for ages? After being asked recently to try to make justified articles on a news website, I am coming the conclusion that the text-justify option is a fail. It looks quite bad as some words become really light weight looking with heavily spaced letters.

Can you enlighten, why the hell can’t you just brute-force specify the space between words – instead of Word-Spacing only ADDING to the automatic spacing between words?

Poker Sem Depósito Fórum on Friday, September 02, 2011 (1:58PM)

Oi:), chamo-me Ricardo e gostei muito do teu blogue! Muito bonita sim senhora!
Aplica-se exactamente com tudo aquilo que aqui li.Hoje por vezes há imenso que falar nos blogs!Nada nada mais intrigante do que por a nossa marca na net!e por isso deixei este comentário!
Assim como tu também eu tenho um forum de poker, aparece por lá e deixa a tua postagem como eu fiz aqui…adorariamos muito de lá ter um membro como tu….
Até amanhã :)

Escarpin Style Louboutin on Wednesday, July 23, 2014 (12:33PM)

First journalist himself with Lang Ping and unfamiliar, how to contact her is a problem
[url=http://www.potentia.fr/help.asp?louboutinsoldes=6]Escarpin Style Louboutin[/url]