How to vertically align floating divs to the bottom?

Question

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.

Calyptrogen

aren't they already aligned to the bottom? Or do you want them right on the border? Seems like they are already aligned bottom with vertical-align:bottom; – Voodoo

Yeah, what robx said. If you only wanted to get the bars to touch the bottom border, all you had to do was remove the padding: 5px;. – Nursery

Answer 1

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!

Justly

I've updated the answer and the jsFiddle, but if you simply change your padding to padding: 5px 5px 0; that will even out the issue. – Justly

Oh, and I removed the vertical-align: bottom; as vertical-align: baseline is the default. – Justly

Just an FYI, if you need to support IE7, it does not support display:table-cell though I think this is the best answer. – Republic

@Paul - He did say that it was only for modern browsers, that's why I used what I did. =D – Justly

@Scott Yes, I know. Just adding extra info where I can. Still voted your answer up. :) – Republic

@Paul Ok ... just making sure. =D – Justly

So what's with the 5px? It's a white space that can't be changed? It's the same for all browsers? I don't like to use 5px just because it fits in this case. Why is it 5? – Calyptrogen

@Calyptrogen - Sorry, I'm not sure. I played around with it for awhile trying negative margins/paddings and could never get that 5px gap at the bottom to go away. Might be what you have to live with to get your example working. You could possibly use positioning to fix it though, let me see if I can get that to work. – Justly

@Scott: To remove that bottom "padding" (it's not really padding), you need vertical-align: bottom. Also, you don't need display: table-cell if you're using display: inline-block on the divs. I also added the hacks to make inline-block work in IE6/7. See: jsfiddle.net/7BBqC/3 - I realise I could have just posted my own answer to this question with all those details, but I'm a nice guy :) – Afar

@Afar - You are right. I must have been trying vertical-align: bottom; before I used display: inline-block; on the child divs. On the parent div, using display: table-cell; effectively wraps the divs as float: left would instead of stretching across the screen. – Justly

@Calyptrogen - jsFiddle and answer updated with part of @thirtydot's suggestion! Looks great now! =D – Justly

@Scott: Yeah, I forget to mention I switched display: table-cell with float: left, which is marginally better because it works in IE6/7. IE7 unfortunately still has around 8% share worldwide, so it's still nice to support it where possible. Other than that, display: table-cell is fine. I guess it depends on whether the OP cares about IE7. +1 by the way. – Afar

@Afar - Yea, in the original description the OP said decent browsers, which I assumed didn't include IE 6 or 7. – Justly

@Scott: You're right. I didn't even really read the question, I just looked at your demo and the comments, and fixed it. – Afar

@Afar - I appreciate it. It was bugging me. I never considered the vertical-bottom, b/c that was the first thing I tried. But, that was with float: left, then display: inline on the child divs. Then I moved to the parent div and the vertical-align: bottom; there shifted it down, but ugly. Then I added display: inline-block and it seemed to fix everything but the gap at the bottom. I didn't know the OP wanted it flush, I thought it looked nice with the 5px padding all around. – Justly

You don't need the float: left. Just make the container display: inline-block. It works perfectly now: jsfiddle.net/rudiedirkx/wgue7 @Afar I think you deserve at least a +1... Don't wannit? – Calyptrogen

@Rudie: There's nothing I could write in an answer to this question that hasn't already been said. If you want to give me +1, upvote any of the other answers I've wrote that you think deserves it. :) – Afar

Answer 2

FLEXBOX! Flexbox is the best.

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.

Calyptrogen

Flexbox is so cool, you don't even have to deal with floats most of the time, because you can't float flex items! (You can still float a flex container, or anything inside a flex item though, which is nice, and doesn't make flexbox any less awesome.) – Ormandy

+1 W3C, Mozilla Developer Network, and CSS Tricks are great sources to learn about flexbox. It's good to note that it seems to only be a WC3 Recommendation at this point. Can anyone confirm or deny that officially? It's current browser support can be found on those links as well. – Justly

Browser support is all that matters and it's actually very good these days. IE10 implements the old way (but most of it's doable). IE11 is part of the cool club. Firefox still doesn't do wrap though. – Calyptrogen

Firefox 28 will have wrap too! Victory! – Calyptrogen

What wizardry is this? – Paramour