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?

Answer 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.