Align div to bottom without breaking layout

Question

I want to align the bars to the bottom here: http://jsfiddle.net/7vdLV/67/

I tried using the following trick:

  .graph { position: relative; }
  .weekbar { position: absolute; bottom: 0; left: 0; }

However it breaks the graph, can anyone tell me how I should do it please in this scenario?

Answer 1

Tweaked the HTML a bit as well as the CSS and got this: http://jsfiddle.net/7vdLV/74/

<div class="graph">
    <div class="weekbar"><div style="height: 10%;"></div></div>
    <div class="weekbar"><div style="height: 20%;"></div></div>
    <div class="weekbar"><div style="height: 30%;"></div></div>
    <div class="weekbar"><div style="height: 40%;"></div></div>
</div>

As TylerH pointed out inline styles are considered bad practice so you would be better replacing them with classes i.e.

<div class="graph">
    <div class="weekbar"><div class="h10"></div></div>
    <div class="weekbar"><div class="h20"></div></div>
    <div class="weekbar"><div class="h30"></div></div>
    <div class="weekbar"><div class="h40"></div></div>
</div>

.h10 {
    height: 10%;
}

Answer 2

Try transform:

-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";

http://jsfiddle.net/L4A2h/1/

Answer 3

Just replace the .graph class with the following code

.graph {
 width: 100%;
 height: 200px;
 background-color: #eaeaea;
 -moz-transform: scaleY(-1);
 -o-transform: scaleY(-1);
 -webkit-transform: scaleY(-1);
 transform: scaleY(-1);
 filter: FlipH;
 -ms-filter: "FlipH";   
}

Hope this Helps