How to vertically align floating divs to the bottom?
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!
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
.