Is there a way to justify-align floating HTML elements with CSS?

Question

Essentially, I'm trying to achieve the affect of "text-align:justify" but with floating block elements. I have many blocks that I want to justify-align.

Ie. each line is horizontally-spaced differently to make sure lengths of each line are the same. (Non-ragged right edge).

Is there a way to do this with CSS? If not, is there a suitable JS library to achieve this? Or is this just infeasible?

Solution 1

If the items are not actually floating, you can use position:absolute; left:1em; right:1em to have CSS calculate the widths of the items for you based on offsets from some positioned parent.

If you are only using float because you have some block-level items you are trying to make flow, use display:inline-block on the items instead of floating them. If the parent element has text-align:justify this should give you the effect (I imagine that) you want.

Here is a simple test showing you the result of inline-block with text-align:justify.

Edit: I've updated the simple test to more clearly show that the left and right edges are always aligned except for the last line.

Solution 2

Completing previous answer, if you want to align DOM nodes created programatically (e.g. by using document.createElement and parentElement.appendChild in javaScript), no white space will be added between aligned elements. This can cause non-working of aligment.

On my Google Chrome 56.0.2924.87 and Firefox 51.0.1 (64-bit) browsers, aligment doesn't work if there aren't any white spaces to separate div elements:

https://jsfiddle.net/jc5qwyaw/

There is an example when I create DOM nodes by javaScript:

https://jsfiddle.net/oa8yeudr/

If you uncomment command wrapDiv.appendChild(document.createTextNode(" "));, you can see the difference. Possible solution can be appending a white space text node after div nodes as example shows above.

Only tested on Chrome 56.0.2924.87 and Firefox 51.0.1 (64-bit).

Comments

[rocketmonkeys]

that is the intended effect, but it doesn't work in IE7. I've modified it for IE7 (jsfiddle.net/mfmfR/3), and I think this may be the answer I'm looking for. I'll have to double check that this actually works for my existing code. Thanks for the pointer!

[Botond Vajna]

this is working, but there is a little proble: the last line does not align, is there a solution for this, like full justify?

[Phrogz]

@BotondVajna You can create full-justification by adding #wrap:after {content:""; display:inline-block; width:100%}. Here's a demo.