How to vertically align floating divs to the bottom?

Question

Because examples rule: http://jsfiddle.net/rudiedirkx/wgue7/

How do I get the bars to the bottom instead of the top? Now they're sticking to the top of the container (#bars) but I want them sticking to the bottom.

As you can see, I don't know the height of the highest bar, so I don't know the height of the container.

These q+a don't help: Vertically align floating divs, Vertically align floating DIVs

Should be simple, right? If it helps: it only has to work in decent browsers.

PS. Number of bars is variable (not in the example) and their heights are. Only their widths are static. Positioning absolute won't help, because the container div doesn't have measurements.

Answer 1

This will do the trick:

#bars {
    display: table-cell;
    border: solid 1px black;
}
#bars > div {
    display: inline-block;
    vertical-align: bottom;
    width: 5px;
    background-color: #999;
    margin-left: 2px;
}
#bars > div:first-child {
    margin-left: 0;
}

It uses display: table-cell; on the parent div, which by default has vertical-align: baseline; applied. This changes the need for float: left; on the child divs and allows us to use display: inline-block;. This also removes the need for your CSS clear fix.

EDIT - Per @thirtydot's comments, adding vertical-align: bottom; to the child divs removes the gap at the bottom.

Therefore, I changed CSS above and jsFiddle. I kept the display: table-cell; so that the parent div wraps the child divs with 0 padding and looks nice and snazzy!

Answer 2

FLEXBOX! Flexbox is the most bestest.

Example: http://jsfiddle.net/rudiedirkx/7FGKN/

Flexbox makes this ridiculously simple (and not to forget correct):

#container {
  display: flex; /* or inline-flex */
  flex-flow: row nowrap; /* is default: columns along the main-axis (row) and no wrapping to next lines */
  align-items: flex-end; /* bottom */
}
#container > div {
  /* margin etc here, but nothing layoutish */
}

That's it Two lines of CSS: display: flex and align-items: flex-end.