CSS / HTML5 vertical progress bar

Question

I am looking for a vertical panel to change the percentage, sort of like a percentage bar, but in the vertical format I managed to get horizontal work using the following command: CSS Progress Bar , but now I would like to emulate this, but vertically.

Is there a way I can do this .

This is the code for the vertical panel:

<div class="score">
<div id="test" class="score-completed" style="height:80;">
<div>&nbsp;</div>
</div>
</div>

.score {
width:34px;
height:141px;
background: url(/assets/images/accordion/score.png) no-repeat 0 0px;
}
.score-completed {

width:26px;
margin-left: -1px;
background: url(/assets/images/accordion/score.png) no-repeat 1px 0;
}
.score-completed div {
float: right;
height: 50%;
width:26px;
margin:99px 1px 0 0;
background: url(/assets/images/accordion/score.png) no-repeat 100% 100%;
display: inline; /* IE 6 double float bug */
}

Answer 1

I don’t understand why you should not create your own - this is my attempt and was not tested in IE, but it should work for the whole modern browser:

#outer {
    width: 30px;
    height: 140px;
    overflow: hidden;

    position: relative;
}

#inner, #inner div {
    width: 100%;
    overflow: hidden;
    position: absolute;
}

#inner {
    bottom: 0;
    height: 0%;
}

#inner div {
    top: 0;
    width: 100%;
    height: 5px;
}

, div, - div , , top: 0, bottom: 0.

: http://www.jsfiddle.net/sNLXn/. , .

Answer 2

, , :

css .score-completed div ( 50%) px ( 40px). , , ( 99 ).

, , 49px, 90px (-9 , ).

edit: id div , css.

:

<div class="score">
<div id="test" class="score-completed" style="height:80;">
<div id="first">&nbsp;</div>
</div>
</div>
<div class="score">
<div id="test" class="score-completed" style="height:80;">
<div id="second">&nbsp;</div>
</div>
</div>

: 99px .score-completed div css , :

#first {margin:99px 1px 0 0; height:40px; }
#second {margin:90px 1px 0 0; height:49px; }