Question

While many other questions address the vertical alignment of elements, none seem to cover my particular situation.

I am trying to effect the following layout, whereby inline elements of unequal height are bottom justified with respect to a container:

+-------------------+
|     +-------+     |
|     |       |     |
|+---+|   B   |+---+|
|| A ||       || C ||
|+---++-------++---+|
+-------------------+

An example can be seen here. Three elements are shown, but assume more of various sizes, though all in a single line.

The example is purposefully incomplete for the sake of illustration. At least one element, say the middle element B, must have a content height and width that is not fixed but is instead determined by (padded) text or some other content. The effect can be seen here.

The bottom of each of the flanking elements A and C aligns with the baseline of the text of B. This raises A and C above the bottom of the container, which is the first problem. The second problem is that the elements must be horizontally flush with respect to each other. (IIRC, the horizontal spacing between adjacent inline elements is unspecified and therefore browser dependent, though at the moment I can’t find the appropriate passage in the CSS spec.)

I can fix the second problem by floating each element. The effect can be seen here.

Now the flanking elements A and C are top justified, as expected. The various solutions that I have found for bottom justifying a floated element make assumptions that are violated by my layout requirements (such as a contained element of non-determinate width).

I did think of one solution that just feels wrong, however: double flipping via transforms. The container and each contained element are vertically flipped by a scale transform. Flipping the container justifies the floated elements to its bottom, and flipping each contained element re-orients the contained element. The effect can be seen here.

This works, but it makes a little part of me die inside. Is there a better solution for this?

Answer 1

Starting from your second example..

Add vertical-align: bottom to div, see: http://jsfiddle.net/awkjj/4/

The simplest fix for the gaps is to remove the whitespace in the HTML: http://jsfiddle.net/awkjj/7/

If that’s distasteful, there are other ways to remove the gaps.