Как да подравните вертикално плаващите divs към дъното?

Това ще свърши работа:

#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;
}

Той използва display: table-cell; на родителския div, който по подразбиране има приложено vertical-align: baseline;. Това променя необходимостта от float: left; на дъщерните divs и ни позволява да използваме display: inline-block;. Това също така премахва необходимостта от вашата ясна корекция на CSS.

РЕДАКТИРАНЕ – Според коментарите на @thirtydot, добавянето на vertical-align: bottom; към дъщерните divs премахва празнината в долната част.

Следователно промених CSS по-горе и jsFiddle. Запазих display: table-cell;, така че родителският div обвива дъщерните div с 0 подложка и изглежда хубаво и ефектно!

FLEXBOX! Flexbox е най-добрият.

Пример: http://jsfiddle.net/rudiedirkx/7FGKN/

Flexbox прави това абсурдно просто (и да не забравя правилно):

#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 */
}

Това е. Два реда CSS: display: flex и align-items: flex-end.