How can I bottom align multiple inline-block divs in one container without losing their flow?

css, css-position, html, position, vertical-alignment

Solution

this is working on my browser (Chrome 19)

html

<div id="container">
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
</div>

css

#container {
    height:10em;
    width:90%;
    border:1px solid black;

    display:-moz-box; /* Firefox */
    display:-webkit-box; /* Safari and Chrome */
    display:box;

    -webkit-box-align:end;
}

#container > div {
    width:34%;
    border:1px solid red;

    -moz-box-flex:1.0; /* Firefox */
    -webkit-box-flex:1.0; /* Safari and Chrome */
    box-flex:1.0;
}

#a {height:20%}
#b {height:50%}
#b {height:70%}

http://jsfiddle.net/benstenson/m6vR7/

Problem

This is for a very simple bar graph I'm working on, ``` <div id="container"> <div style="display:inline-block;"> </div> <div style="display:inline-block;"> </div> <div style="display:inline-block;"> </div> </div> ``` If I set the container to relative and the inner divs to absolute & bottom:0, then they all overlap. They flow nicely without the absolute positioning but then the bar graph is upside down. Note: My intention was to retain the inline flow of the bars and not have to explicitly specify the horizontal positions. Here is a better example of the problem. http://jsfiddle.net/benstenson/NvvV6/1/ ``` 1) correct orientation but vertical alignment is top <div id="no-content" class="container"> <div class="a"></div> <div class="b"></div> <div class="c"></div> </div> 2) wrong orientation, vertical alignment top <div id="has-content" class="container"> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div> </div> 3) mixed orientation, alignment is crazy <div id="mixed" class="container"> <div class="a">a</div> <div class="b">b</div> <div class="c"></div> </div> 4) correct orientation and correct alignment but<br/> flow has been lost and horizontal position must be explicit <div id="absolute" class="container"> <div class="a">a</div> <div class="b">b</div> <div class="c"></div> </div> 5) here we go! <table class="container"> <tr> <td><div class="a">a</div></td> <td><div class="b">b</div></td> <td><div class="c"></div></td> </tr> </table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ ``` css ``` body {padding:1em;font-family:sans-serif;font-size:small;} .container { height:2.5em;width:50%;margin-bottom:1em; background-color:lightgray; font-size:larger; font-weight:bold; text-transform:Uppercase; } div.container > div { width:32%; display:inline-block; background-color:black; color:cyan; } #absolute { position:relative;} #absolute > div {position:absolute;bottom:0px;opacity:.3;} .a {height:50%;} .b {height:60%} .c {height:80%;} td{width:33.333%;vertical-align:bottom;} td > div{​background-color:black;​color:cyan;}​ ``` So is there a better way to do this, like with the webkit flexbox or something?

Original source

Related problems