vertical-align:bottom WITH float:left

Question

how could i do vertical-align:bottom for some divs that have float:left?

you can see the source here: http://jsfiddle.net/Lb1su4w2/

---

this is what i have: (every color is a different div)

this is what i want to have:

Answer 1

Vertical align only works with inline block elements, floated elements ignore the vertical align property.

Update the box class with the following:

.box {
    display: inline-block;
    vertical-align: bottom;
    width:80px;
}

I would make them all inline block elements and remove the whitespace with one of these techniques.

Updated fiddle: http://jsfiddle.net/9rcnLb8n/

Alternatively you could use flexbox with the align-self: flex-end; property.