html - How to attach bargraph bars to bottom without fixed height -

i trying make bar graph show visitor stats, cannot figure out how attach bars bottom without knowing exact height. height in % , it's different every time check cannot set fixed height.

my code is:

css:

#graph {     width: 447px;     height: 250px;     border: 1px solid #aeaeae;     background-image:url(css/bargraph.png);     background-repeat:repeat;     border-top-left-radius:5px;     border-top-right-radius:5px;     position: relative; }  #graphtext {     padding-left:17px;     width: 430px;     height: 20px;     background-color:#ccc;     font-size:9px;     border-bottom-left-radius:5px;     border-bottom-right-radius:5px; }  .bartext {     width: 10%;     margin-right: 17px;     display: inline-block;     height:20px;     text-align:center;     margin-top:5px; }  #bar {     width: 10%;     display: inline-block;     margin-right:17px;     background-image: linear-gradient(bottom, rgb(0,240,84) 0%, rgb(0,187,255) 68%);     background-image: -o-linear-gradient(bottom, rgb(0,240,84) 0%, rgb(0,187,255) 68%);     background-image: -moz-linear-gradient(bottom, rgb(0,240,84) 0%, rgb(0,187,255) 68%);     background-image: -webkit-linear-gradient(bottom, rgb(0,240,84) 0%, rgb(0,187,255) 68%);     background-image: -ms-linear-gradient(bottom, rgb(0,240,84) 0%, rgb(0,187,255) 68%);     border-top-left-radius:5px;     border-top-right-radius:5px;     position:absolute !important;     bottom:0px !important; } 

and html:

<div id="graph"> <div style="height:250px; width:447px; position:absolute;">             <div style="height: 29%;" id="bar" title="43234 visitors, 3024 unique visitors"></div><!--          --><div style="height: 11%;" id="bar" title="43234 visitors, 3024 unique visitors"></div><!--          --><div style="height: 6%;" id="bar" title="43234 visitors, 3024 unique visitors"></div><!--          --><div style="height: 49%;" id="bar" title="43234 visitors, 3024 unique visitors"></div><!--          --><div style="height: 59%;" id="bar" title="43234 visitors, 3024 unique visitors"></div><!--          --><div style="height: 2%;" id="bar" title="43234 visitors, 3024 unique visitors"></div><!--          --><div style="height: 40%;" id="bar" title="43234 visitors, 3024 unique visitors"></div> </div> </div> <div id="graphtext">         <div class="bartext">monday</div><!--         --><div class="bartext">tuesday</div><!--         --><div class="bartext">wednesday</div><!--         --><div class="bartext">thursday</div><!--         --><div class="bartext">friday</div><!--         --><div class="bartext">saturday</div><!--         --><div class="bartext">sunday</div> </div> 

which yields:

and removing absolute position yields:

any clues?

if position element absolutely , don't set left or right, defaults left: 0 causing of bars on left.

you can remove absolute positioning , add vertical-align: bottom boxes , set line-height of parent div equal height:

<div style="height:250px;line-height: 250px; width:447px; position:absolute; "> 

#bar {     /* ... */      vertical-align: bottom; } 

http://jsfiddle.net/nlf6j/

as noted in comments though, id values should unique. should change class.