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

css alignment css-float justify
rocketmonkeys picture rocketmonkeys · Dec 6, 2010 · Viewed 14k times · Source

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

Phrogz picture Phrogz · Dec 6, 2010

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.

Related questions

How to align 3 divs (left/center/right) inside another div?

I want to have 3 divs aligned inside a container div, something like this: [[LEFT] [CENTER] [RIGHT]] Container div is 100% wide (no set width), and center div should remain in center after resizing the container. So I set: #container{width:100%;} #left{…

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How to align a <div> to the middle (horizontally/width) of the page

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More