html - CSS height "expanding" the wrong way -

i trying make thermometer can keep display percentage of donations received easily.

i got on using jquery control height of div fill of thermometer. doing vertically within thermometer "fill" moves in wrong direction , can't figure out how reverse since height of div "moves down"

sorry having difficulty explaining this. here have far: http://bit.ly/jrhwho

here css:

#thermometer { height: 377px; width: 180px; margin:5px; padding:0; border: #cccccc solid 1px; background: url(thermometer.jpg);}  #level { height: 250px; width:26px; margin: 0; padding:0;  background: #eb1c22;  position:relative; top:51px; left:71px; } 

here html:

<div id='thermometer'>     <div id='level'>     </div> </div>  <br> type number between 0 , 250: <br> 

you can use position: absolute; , bottom: 0; on div want expand. then, make sure parent element (container of expanding div) set position: relative.

#thermometer { height: 377px;                 width: 180px;                 margin:5px;                 padding:0;                 border: #cccccc solid 1px;                 background: url(thermometer.jpg);                position: relative;} #level { height: 250px;           width:26px;           margin: 0;           padding:0;            background: #eb1c22;          position: absolute;           bottom: 0px;           left:71px; } 

if 0 doesn't work you, adjust until does. point use bottom, not top.