Progress bar layout using CSS and HTML

Question

I am trying to achieve UI as shown in the image. However I am having little hard time after trying combinations of positioning now I am clueless. Can someone help me with this?

<style>     .progress{         position:relative;         width:500px;     }     .bar{      }     .percent{      } </style> <div class="progress">     <span class="bar" width="%"></span>     <span class="percent">50%</span> </div> 

Answer 1

HTML:

<div id="progress">     <span id="percent">30%</span>     <div id="bar"></div> </div> 

CSS:

#progress {  width: 500px;     border: 1px solid black;  position: relative;  padding: 3px; }  #percent {  position: absolute;     left: 50%; }  #bar {  height: 20px;  background-color: green;  width: 30%; } 

Sample here: http://jsfiddle.net/WawPr/