How to vertically align floating divs to the bottom?

CssCss FloatVertical Alignment

Css Problem Overview

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: https://stackoverflow.com/questions/1022795/vertically-align-floating-divs, https://stackoverflow.com/questions/4541787/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.

Css Solutions

Solution 1 - Css

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!

Solution 2 - Css

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.

Categories
Recommended Css Solutions
Recommended Css Float Solutions
Recommended Vertical Alignment Solutions

Previous Solution:

Why would Magento fail to save a customer after generating an ID?

PhpMysqlMagento

Next Solution:

C# internal interface with internal implementation

C#InterfaceInternal

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRudieView Question on Stackoverflow
Solution 1 - CssCode MaverickView Answer on Stackoverflow
Solution 2 - CssRudieView Answer on Stackoverflow