text-align:justify not working

Question

I've been successfully using the method described here (link to article) for the past few days.

It shows how to avoid calculating percentage-based margins for blocks in a grid by applying text-align:justify to the parent container.

An :after psuedo element makes sure there is always "text" being forced onto the next line to make sure it justifies.

But in this particular instance (link to jsFiddle) the blocks are not responding to text-align: justify. The code below has been working fine elsewhere so there's something I'm missing.

HTML

<div class="container"><div class="contents"></div><div class="contents"></div><div class="contents"></div><div class="contents"></div><div class="contents"></div></div>

CSS

.container {
     font-size: 0.1px;
     text-align:justify;
}

.container:after {
    content: '';
    display: inline-block;
    width: 100%;
}

.contents {
    display: inline-block;
    vertical-align: top;
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

Answer 1

text-align:justify works by stretching the spaces between the words, as delimited by space characters. So, in order for the gaps between the inline-blocks to stretch, there must be space characters between them. In your example case, the blocks have no spaces between them.

Add the spaces, and the blocks will justify.