How to vertically align floating divs to the bottom?
css, css-float, vertical-alignment
Solution
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!
Problem
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.