Align div to bottom without breaking layout - html

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

Answer 4

Simplest solution:
apply
.weekbar{
position:relative;
display:inline-block;
top:50%; // height of biggest bar
}
Check this JSFiddle
Or if ancient browser support is not a big deal you can make use of the ::before element as follows:
.graph::before{
content:"";
display:block;
height:50%; // height of the biggest bar
}
.weekbar{
display:inline-block;
}
check this JSFiddle

Answer 5

Make these edits to your CSS:
.graph { position:relative; }
.weekbar { position: relative; top: 100%; left: 0; }
Is this what you were looking to do?
http://jsfiddle.net/4HEEk/

Answer 6

You can use position:relative; for the parent and position:relative; also for the child and calculate the top value by this jQuery code:
$(document).ready(function() {
var parentHeight = $('.graph').height();
$('.weekbar').each(function() {
var height = parentHeight - $(this).height();
$(this).css('top',height*100/parentHeight + '%');
});
});
Here is a working fiddle

Answer 7

I would change float for display:inline-block; then set an "invisible" resetter div at the start of your graph to make sure all the elements start from the bottom (rather from the bottom of the tallest line.
.weekbar {
width: 3.1%;
margin-left: -4px;
margin-right: 2%;
display:inline-block;
background-color: #aeaeae;
}
.resetter{
height:100%;
display:inline-block;
width:0;
margin-right:-4px;
}
Have a look at this JSFiddle.
Also on a note about inline style usage (dont do it!). If you know that you have a discrete number of heights (ie. in your example they are all multiples of 10) i would suggest creating classes for them.