Two identical divs except for spacing & indentation-- why do they display differently?

Question

I'm trying to use text-align:justify to space divs equally in another div. For some reason it works if the html is indented but not otherwise. Unfortunately the application I'm working on often makes all the html run together in a big string so I need to figure out how.

Here is a link to a code pen with both problems: http://www.codepen.io/evanhobbs/pen/LDgJc

And here is the code:

1- Identical to number 2 but with the all the spacing/indentation

<div class="equal-justify-wrapper">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <span class="equal-justify-stretcher"></span>
</div>

2-. Identical to number 1 but with the all the spacing/indentation removed

<div class="equal-justify-wrapper"><div>one</div><div>two</div><div>three</div><span class="equal-justify-stretcher"></span></div>

CSS

.equal-justify-wrapper {
  list-style: none;
  background-color:red;
  text-align: justify;
   -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

.equal-justify-wrapper > div {
     width: auto;
    //height: 40px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
    background: #000;
    color: yellow;

}

.equal-justify-stretcher {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

Side note for people looking at this: Works in IE 10; fails in FF and Chrome. If you place an ` ` between the div definitons FF and Chrome render correctly. — NotMe, Oct 07 '13 at 22:32
This was also noted once in a comment [here](http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs/16310009#comment13627118_6880421) by venimus — Danield, Oct 07 '13 at 23:14

score 4 · Accepted Answer · answered Oct 07 '13 at 22:44

That is because when there is no whitespace between them they are considered a single word.(imagine a long word where you had inserted tags to colorize some letters. you would not want to have the word split there.)

In the first case the whitespace (enter/tab) acts as a word boundary.

You need to introduce some white space between the tags for properties like text-align: justify; on the parent to take effect.

kapex · Answer 2 · 2013-10-07T22:58:55.173

It sounds like this is correct behaviour. See Alignment: the 'text-align' property and Inline formatting contexts:

In the case of 'justify', this property specifies that the inline-level boxes are to be made flush with both sides of the line box if possible, by expanding or contracting the contents of inline boxes, else aligned as for the initial value.

If [the text-align] property has the value 'justify', the user agent may stretch spaces and words in inline boxes (but not inline-table and inline-block boxes) as well.

No white space, no justify.

The browser could use letter spacing to justify the single word in the second example. This would still result in a different displayed text for both cases though.

The problem is with the framework you are using, because it removes whitespace too eagerly. To solve this you should find a way to keep the whitespace. You could try using the unicode html entity of the space character:  

Two identical divs except for spacing & indentation-- why do they display differently?

2 Answers2