html - Gauge markup ready for dynamic content -

i'm trying create markup gauge display how full messages inbox is, i'm having trouble dynamic part.

body {      background-color: #000;      font-family: "helvetica";      margin: 35px 35px 35px 50px;  }    #gauge {      -webkit-border-radius: 10px;         -moz-border-radius: 10px;              border-radius: 10px;        background-color: #5e767d;      border: 2px solid #fff;      color: #000;      float: right;      height: 260px;      margin-left: 15px;      overflow: hidden;      text-align: center;      width: 50px;  }            #gauge div {          display: block;          overflow: hidden;          padding-top: 5px;          position: relative;      }        #gauge #current {          font-size: 30px;          font-weight: 900;          z-index: 2;      }        #gauge #percentual {          background-color: #fff;          font-weight: 800;          z-index: 1;      }

<div id="gauge">    <div id="current" style="height: 15%; top: 5%;">85</div>    <div id="percentual" style="height: 85%;">100%</div>  </div>

also on jsfiddle ;)

this updated version, cleaner previous works better don't need manipulate top property in such weird way before, works when current value 85 or lower. o.o

the logocs behind new markup came is:

• the value of current height of percentual;
• the difference between them, height of current;
• the height of current minus 10% top current stick number bottom, keeping them both close, in middle;

how fix in order make work regardless numbers used?

the text not centered like, @ least don't have text overlapping anymore , logics remains simple:

body {      background-color: #000;      font-family: "helvetica";      margin: 35px 35px 35px 50px;  }    #gauge {    -webkit-border-radius: 10px;    -moz-border-radius: 10px;    border-radius: 10px;      background-color: #5e767d;    border: 2px solid #fff;    color: #000;    float: right;    height: 295px;    margin: -7px 0 0 15px;    overflow: hidden;    text-align: center;    width: 50px;  }        #gauge .current {        display: block;        font-size: 22px;        font-weight: 900;        top: -15px;        z-index: 2;      }          #gauge .current span {          position: relative;          top: 100%;        }        #gauge .percentual {        background-color: #fff;        display: block;        font-weight: 800;        padding-top: 15px;      }          #gauge .percentual span {          margin-left: -2px;          position: relative;          top: 15px;        }

<div id="gauge">      <div class="current" style="height: 10%; top: 0%">      <span>90</span>    </div>      <div class="percentual" style="height: 90%;">      <span>100%</span>    </div>    </div>