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.

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; — robx, May 24 '11 at 21:12
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;`. — Chloe, Jul 24 '15 at 01:16

Code Maverick · Accepted Answer · 2014-03-14T16:00:30.657

52

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!

edited Mar 14 '14 at 16:00

answered May 24 '11 at 20:34

Code Maverick

20,171
12
62
114

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. – Code Maverick May 24 '11 at 21:06
1

Oh, and I removed the `vertical-align: bottom;` as `vertical-align: baseline` is the default. – Code Maverick May 24 '11 at 21:07
1

Just an FYI, if you need to support IE7, it does not support `display:table-cell` though I think this is the best answer. – Paul Sham May 24 '11 at 21:08
@Paul - He did say that it was only for modern browsers, that's why I used what I did. =D – Code Maverick May 24 '11 at 21:11
@Scott Yes, I know. Just adding extra info where I can. Still voted your answer up. :) – Paul Sham May 24 '11 at 21:14
@Paul Ok ... just making sure. =D – Code Maverick May 24 '11 at 21:18
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? – Rudie May 24 '11 at 21:32
@Rudie - 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. – Code Maverick May 24 '11 at 21:45
3

@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 `div`s. I also added the hacks to make `inline-block` work in IE6/7. See: http://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* :) – thirtydot May 24 '11 at 21:54
@thirtydot - 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. – Code Maverick May 24 '11 at 22:01
@Rudie - jsFiddle and answer updated with part of @thirtydot's suggestion! Looks great now! =D – Code Maverick May 24 '11 at 22:04
@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](http://gs.statcounter.com/#browser_version-ww-monthly-201004-201104), 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. – thirtydot May 24 '11 at 22:05
@thirtydot - Yea, in the original description the OP said decent browsers, which I assumed didn't include IE 6 or 7. – Code Maverick May 24 '11 at 22:13
@Scott: You're right. I didn't even really read the question, I just looked at your demo and the comments, and fixed it. – thirtydot May 24 '11 at 22:16
@thirtydot - 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. – Code Maverick May 24 '11 at 22:22
You don't need the `float: left`. Just make the container `display: inline-block`. It works perfectly now: http://jsfiddle.net/rudiedirkx/wgue7/ @thirtydot I think you deserve at least a +1... Don't wannit? – Rudie May 26 '11 at 13:23
@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. :) – thirtydot May 26 '11 at 13:54

score 42 · Answer 2 · edited May 13 '23 at 16:32

42

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.

edited May 13 '23 at 16:32

GoldenretriverYT

3,043
1
9
22

answered Jun 04 '13 at 23:51

Rudie

52,220
42
131
173

3

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.) – BoltClock Nov 17 '13 at 06:55
+1 [W3C](http://www.w3.org/TR/css3-flexbox/), [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes), and [CSS Tricks](http://css-tricks.com/snippets/css/a-guide-to-flexbox/) 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. – Code Maverick Nov 22 '13 at 15:08
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.](https://bugzilla.mozilla.org/show_bug.cgi?id=702508) – Rudie Nov 22 '13 at 19:44
[Firefox 28 will have `wrap` too! Victory!](https://bugzilla.mozilla.org/show_bug.cgi?id=702508) – Rudie Jan 14 '14 at 14:44
What wizardry is this? – phuwin Apr 20 '16 at 08:23

How to vertically align floating divs to the bottom?

2 Answers2

Linked