Vertical align of div

Question

I'm trying to create a simple html/css graph, which has to separate bars for the values that are greater than 0 and values that are smaller than 0. It looks like this: http://jsfiddle.net/km27Q/3/ And I'm stucked with centering the vertical-align of the top div to bottom. So I need the divs with class bar to be vertical aligned to bottom in div with class graph_top Could anyone help me with that? I looked for couple of tutorial but I couldn't find anything that works with percent as the values for the width.

Image explanation: http://s21.postimg.org/wnjcvjism/Screenshot_from_2014_04_21_16_26_01.jpg

Here's the code:

HTML

<div class="graph">
<div class="graph_top">
    <div class="lol">
<div class="bar" style="height: 1px;"></div><div class="bar" style="height: 11px;"></div>
    </div>
</div>
<div class="horizontal_line"></div>
<div class="graph_bottom">
<div class="bar2" style="height: 1px;"></div><div class="bar2" style="height: 11px;"></div>
</div>

</div>

CSS

.graph {
    width: 95%;

    height: 101px;
    border: 1px solid #aeaeae;
    background-color: #eaeaea;
}
.graph_top
{
    width: 100%;
    height: 50px;
    max-height: 50px;
    position: relative;
}
.graph_bottom
{
    width: 100%;
    height: 50px;
    max-height: 50px;
}
.horizontal_line
{
    width: 100%;
    border-bottom: 1px solid #aeaeae;
    height: 1px;
    padding: 0px;
}
.bar
{
    width: 10%;
    background-color: #aeaeae;
    float: left;
}
.bar2
{
    width: 10%;
    background-color: maroon;
    float: left;
}
.lol
{
    width: 100%;
    position:absolute;
    bottom:0; 
}

Thanks for answers.

Answer 1

http://jsfiddle.net/km27Q/15/

You just shift the left position with 10% for each bar.

.graph_top {
  width: 100%;
  height: 50px;
  max-height: 50px;
  position: relative;
}
.bar{
  position:absolute;
  bottom: 0;
  width: 10%;
  background-color: #aeaeae;
}


    <div class="graph">
        <div class="graph_top">
            <div class="bar" style="height: 1px;left:0;"></div>
            <div class="bar" style="height: 11px;left: 10%;"></div>
            <div class="bar" style="height: 30px;left: 20%;"></div>
            <div class="bar" style="height: 25px;left: 30%;"></div>
            <div class="bar" style="height: 15px;left: 40%;"></div>
            <div class="bar" style="height: 6px;left: 50%;"></div>
        </div>
        <div class="horizontal_line"></div>
        <div class="graph_bottom">
            <div class="bar2" style="height: 1px;"></div>
            <div class="bar2" style="height: 11px;"></div>
        </div>
    </div>