How to stick bars to the bottom in this chart - html

Question

I made a chart with html+css (i really need it to work in all browsers)
its ok but the bars are on the top and i need them to stick to the bottom
i tried vertical-align and tried some other things but neither of them worked
Here is a jsfiddle (if you see it you'll know what i mean)
JsFiddle
Code:
CSS:
.clear {clear:both; line-height: 0; width: 0; height: 0}
#chart {
width: 100%;
height: 220px;
font-family: Arial,sans-serif;
font-size: 12px;
line-height: 17px;
color: #777777;
}
#scale, #chartwrap, #description {
float: left;
margin-right: 7px;
}
#scale {
margin-top: -7px;
}
#scale i {
display: block;
text-align: right;
}
#chartbox {
height: 170px;
display: inline-block;
border: 2px solid #C7C7C7;
border-right: 0;
border-top: 0;
}
.thisday {
display: inline-block;
height: 170px;
margin: 0 18px;
width: 40px;
vertical-align: bottom;
}
.vbottom {
display: block;
}
.thisday .in, .thisday .out {
width: 18px;
display: inline-block;
vertical-align: bottom;
}
.thisday .in span, .thisday .out span {
text-align: center;
font-size: 11px;
color: #2F6D91;
display: block;
}
div.inbar, div.outbar {
width: 18px;
float: left;
background: #41799F;
}
div.outbar {
background: #A5D2F0;
}
div#days {
margin-top: 5px;
}
div#days i {
font-size: 11px;
float: left;
width: 36px;
margin: 0 18px;
}
#description {
margin-left: 7px;
}
#outdes {
margin-top: 1px;
}
#indes i, #outdes i {
float: left;
display: inline-block;
width: 12px;
height: 12px;
background: #40779D;
}
#outdes i {
background: #A5D2F0;
}
#indes span, #outdes span {
float: left;
margin-left: 3px;
line-height: 12px;
font-size: 11px;
}
HTML:
<div id="chart">
<div id="scale">
<i>500</i>
<i>450</i>
<i>400</i>
<i>350</i>
<i>300</i>
<i>250</i>
<i>200</i>
<i>150</i>
<i>100</i>
<i>50</i>
<i>0</i>
</div>
<div id="chartwrap">
<div id="chartbox">
<!-- DAILY -->
<div class="thisday">
<div class="vbottom">
<div class="in">
<span>50</span>
<div class="inbar" style="height:20px;"></div>
</div><div class="out">
<span>10</span>
<div class="outbar" style="height:5px;"></div>
</div>
</div>
</div>
<!-- /DAILY -->
<!-- DAILY -->
<div class="thisday">
<div class="vbottom">
<div class="in">
<span>50</span>
<div class="inbar" style="height:20px;"></div>
</div><div class="out">
<span>10</span>
<div class="outbar" style="height:5px;"></div>
</div>
</div>
</div>
<!-- /DAILY -->
<br class="clear">
</div>
<div id="days">
<i>02-17</i>
<i>02-18</i>
<br class="clear">
</div>
</div>
<div id="description">
<div id="indes"><i></i><span>Received</span><br class="clear"></div>
<div id="outdes"><i></i><span>Sent</span><br class="clear"></div>
</div>
<br class="clear">
</div>

Answer 1

here is your new CSS code :
.clear {clear:both; line-height: 0; width: 0; height: 0}
#chart {
width: 100%;
height: 220px;
font-family: Arial,sans-serif;
font-size: 12px;
line-height: 17px;
color: #777777;
}
#scale, #chartwrap, #description {
float: left;
margin-right: 7px;
}
#scale {
margin-top: -7px;
}
#scale i {
display: block;
text-align: right;
}
#chartbox {
height: 170px;
display: inline-block;
border: 2px solid #C7C7C7;
border-right: 0;
border-top: 0;
}
.thisday {
display: inline-block;
height: 170px;
margin: 0 18px;
width: 40px;
vertical-align: bottom;
position: relative;
}
.vbottom {
display: block;
position: absolute;
bottom:0px;
}
.thisday .in, .thisday .out {
width: 18px;
display: inline-block;
vertical-align: bottom;
}
.thisday .in span, .thisday .out span {
text-align: center;
font-size: 11px;
color: #2F6D91;
display: block;
}
div.inbar, div.outbar {
width: 18px;
float: left;
background: #41799F;
}
div.outbar {
background: #A5D2F0;
}
div#days {
margin-top: 5px;
}
div#days i {
font-size: 11px;
float: left;
width: 36px;
margin: 0 18px;
}
#description {
margin-left: 7px;
}
#outdes {
margin-top: 1px;
}
#indes i, #outdes i {
float: left;
display: inline-block;
width: 12px;
height: 12px;
background: #40779D;
}
#outdes i {
background: #A5D2F0;
}
#indes span, #outdes span {
float: left;
margin-left: 3px;
line-height: 12px;
font-size: 11px;
}
To sum up, I just added position: relative; to the end of .thisday, and I also added position: absolute; and then bottom:0px; to .vbottom.
Also, this method will still work if one day you enlarge your graphic. It will stick to the bottom of your graph and you will not have to reajust from top. If you want the bars to go a pixel more or less from the bottom, just do bottom:-1px; or bottom:1px; instead of 0px and it will be readjusted !

Answer 2

This will make the bars always align along the bottom of the chart. It's a nice solution as long as you don't need to support earlier versions of IE than 8.
.thisday {
display: inline-table;
height: 170px;
margin: 0 18px;
width: 40px;
}
.vbottom {
display: table-cell;
vertical-align: bottom
}
.thisday is the container and has been given display: inline-table, and the area supposed to be in the bottom has display: table-cell and vertical-align: bottom.
EDIT: since .vbottom is not absolutely positioned, width on .thisday can be left out altogether, in case you might want to add more bars per day or so. That's one clear advantage of this method.
Forked fiddle: http://jsfiddle.net/7VvZA/1/

Answer 3

Add position relative for chartbox class:
position: relative;
and position absolute for vbottom class:
position: absolute;
bottom: 0;
UPDATE (I work in devtools and don't save changes here is updated version):
http://jsfiddle.net/QzHzT/2/