50

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.

2
  • 7
    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, 2011 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, 2015 at 1:16

2 Answers 2

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!

17
  • 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. May 24, 2011 at 21:06
  • 1
    Oh, and I removed the vertical-align: bottom; as vertical-align: baseline is the default. May 24, 2011 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, 2011 at 21:08
  • @Paul - He did say that it was only for modern browsers, that's why I used what I did. =D May 24, 2011 at 21:11
  • 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 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 :)
    – thirtydot
    May 24, 2011 at 21:54
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.

5
  • 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, 2013 at 6:55
  • +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. Nov 22, 2013 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.
    – Rudie
    Nov 22, 2013 at 19:44
  • Firefox 28 will have wrap too! Victory!
    – Rudie
    Jan 14, 2014 at 14:44
  • What wizardry is this?
    – phuwin
    Apr 20, 2016 at 8:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.