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?
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/
Works for me when absolutely positioned:
<style type='text/css'>
#container{
position :relative;
border :1px solid #000;
height :60px;
width :100px;
}
.b{
position:absolute;
width :20px;
bottom :0
}
.b1{background:blue ;height:10px; left:0px}
.b2{background:red ;height:30px; left:30px;}
.b3{background:yellow;height:50px; left:60px}
</style>
<div id="container">
<div class='b b1'></div>
<div class='b b2'></div>
<div class='b b3'></div>
</div>
Fiddle here.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With