Question

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

I got 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>

Answer 1

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.