Question

I am trying to build a simple vertical thermometer with CSS. I took some sample code from a tutorial which had the “mercury” in a horizontal thermometer growing from left to right.

Now that I am trying to make a vertical bar, how can I make the “mercury” grow from bottom to top?

It’s coming out like this:
But, I want the red section to be aligned at the bottom of the grey.

I’ve tried adding top: 100% to #vertmeter-bar which starts the red section in the right place. But, providing a negative height attribute for #vertmeter-bar doesn’t seem to work.

Here’s my CSS:

#vertmeter
{
  height:350px;
  width:30px; 
  background-color:#D1D7DF;
}   
#vertmeter_bar
{
  background-color:#CF3500;
  width:100%;
}

The HTML:

<div id="vertmeter">
<div id="vertmeter_bar" style="height:0%;">
</div>
</div>

And a jquery fragment to animate a transition:

$('#vertmeter_bar').animate({height:"10%"}, 1000, 'swing');

Answer 1

#vertmeter
{
  height:350px;
  width:30px; 
  background-color:#D1D7DF;
  position:relative;
}   
#vertmeter_bar
{
  background-color:#CF3500;
  width:100%;
  position:absolute;
  bottom:0;
}