4

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?

mskfisher
  • 3,291
  • 4
  • 35
  • 48
Nathan Ryan
  • 12,893
  • 4
  • 26
  • 37

1 Answers1

3

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.

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Thanks for the quick response. Adding the vertical-align solves the problem with bottom justification, but not the horizontal spacing. When applying the float in order to remove the horizontal spacing, the vertical-align is no longer applicable. Is there another way to remove the horizontal spacing? – Nathan Ryan Jul 06 '11 at 00:04
  • Incidentally, the new bikeshedding property (when implemented) should allow easy elimination of the gaps. – Nathan Ryan Jul 06 '11 at 00:20
  • Correct, but I think we'll be waiting a long time for it :( – thirtydot Jul 06 '11 at 00:36