Positioning stacked divs at the bottom of a container - css

Question

I'm building a staked bar graph in PHP. I need it to look like this:
Currently I am able to stack-up the gray and red values, but they are at the top of the .graph container. How do I align them at the bottom? I tried vertical-align: bottom but it did not really work.
<div class="graph">
<div class="bar">
<div class="views" style="height:'.$showViews.'px"></div>
<div class="actions" style="height:'.$showActions.'px"></div>
</div>
</div>
and CSS
.graph {
width: 200px;
height: 32px;
border-top: 1px solid #f5f5f5;
border-bottom: 1px solid #ccc;
background-color: #f5f5f5;
}
.graph .bar {
width: 10px;
float: left;
margin: 0 1px;
height:30
}
.graph .bar .views {
background-color: #ccc
}
.graph .bar .actions {
background-color: red
}
Here's my code on JSFIDDLE.
Thanks.

Answer 1

position:absolute will make your life easier!
Here's a fiddle:
http://jsfiddle.net/RZ8ye/1/
Basically, we're using position:absolute to stack the elements on top of one another. By giving the parent positioning (in our case, "relative"), we position the stacked elements relative to that. We set bottom, left, and right and then define the height with an inline style (percentage based, based on the parent)

Answer 2

just added position:relative value in CSS.
here is the modified code.
.graph .bar .views
{
background-color: #ccc;
height:10px; /*height can be added dynamically*/
position:relative;
}
.graph .bar .actions
{
background-color: red;
position:relative;
height:20px;
}
HTML looks like same as posted .
<div class="graph">
<div class="bar">
<div class="views" style="height:'.$showViews.'px"></div>
<div class="actions" style="height:'.$showActions.'px"></div>
</div>
<div class="bar">
<div class="views" style="height:'.$showViews.'px"></div>
<div class="actions" style="height:'.$showActions.'px"></div>
</div>
</div>
Here is the Demo. http://jsfiddle.net/HHnRQ/1/