CSS height "expanding" the wrong way

I am trying to make a thermometer that can keep display the percentage of donations received easily.

I go开发者_如何学编程t help on using jquery already to control the height of the div which will be the fill of the thermometer. However now that I am doing it vertically within the thermometer the "fill" moves in the wrong direction and I can't figure out how to reverse that since the height of a div "moves down"

Sorry I am having difficulty explaining this. Here is what I have so far: http://bit.ly/jrHwHo

here is the 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 is the html:

<div id='thermometer'>
    <div id='level'>
    </div>
</div>

<br>
Type a number between 0 and 250: <br>

You can use position: absolute; and bottom: 0; on the div you want to expand. Then, just make sure that the parent element (container of the expanding div) is set to 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 for you, just adjust it until it does. The point is to use bottom, not top.

Use bottom instead of top to position the level element. That way the position will be relative to the bottom of the parent, and it will grow upwards.

Anchor it using bottom instead of top.

It looks like bottom: -180px will do it (and don't forget to remove the top property, or set it to auto).

Example using bottom: -180px and no top.

love the thermometer, just a suggestion, in your javascript add something to prevent a number larger than the goal to be entered or else the level of the "liquid" in the thermometer will go past the background. What I would do is have a variable that is the max value. Before setting the value of the height have it check the number entered against the max value. If the number entered is more that the max value then make the height just go to the max.