Creating a dynamic vertical percentage bar using css and javascript?

I am trying to create a percentage bar in my ASP.net MVC to visually display some model data.

I have successfully created a javascript piece (albeit in a long way). However, I have a slight problem with the "visual display", instead of putting the "green section" in the div, instead it extends outside of it.

(see js fiddle for better understanding).

The actual variables come from the Model (which works !: P) and therefore won't always be 64%

(this value is presented width

, which I believe is the correct height, it just appears below it (does not replace some of the red background).

I would like a little help / advice on how to make this "bottom border" appear inside the div rather than expanding it.

I think I am using the wrong style or something, but reading from this SO question I cannot find an alternative.

Any suggestions greatly appreciated.

Current CSS:

div{
    width:200px;
    height:500px;
    border: 5px solid #808080;
    vertical-align:central; 
    text-align:center; 
    background-color: red;
} 

      

        
        
        
      

    

With Javascript:

var percent = 64 //obtained from mode data
var cap = 100 //obtained from model data
    percent=(percent/cap)
var width = percent*500 //500 is height of div
alert("width is "+width +" cap is read as "+cap +" % is "+percent);
document.getElementById("myTank").style["border-bottom"]=width +"px solid green";
document.getElementById("myTank").innerText = percent +"%";