Progress bar percentage align with bar

Question

I'm creating a progress bar, currently the percentage are shown in right side, but now I want the percentage able to follow the bar, no matter the blue bar is short or long.

Example that I expect

---

 .popup_survey_whitebox_percent { font-size: 12px; font-weight: bold; font-style: italic; color: #F30; float: right; margin-top: 10px; } .popup_survey_whitebox_progressbar { background: #444; width: 100%; height: 5px; border-radius: 10px; } .popup_survey_whitebox_progressbar_inner { background: #0CF; width: 100%; height: 5px; border-radius: 10px; box-shadow: 0 3px 7px rgba(0, 0, 0, .25); margin-top: 5px; } 

 <div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</div> <br> <div class="popup_survey_whitebox_progressbar"> <div class="popup_survey_whitebox_progressbar_inner" style="width:75%;"></div> </div> <div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">15%</div> <br> <div class="popup_survey_whitebox_progressbar"> <div class="popup_survey_whitebox_progressbar_inner" style="width:15%;"></div> </div> 

Answer 1

HTML:

Move popup_survey_whitebox_percent inside popup_survey_whitebox_progressbar_inner :

<div class="popup_survey_whitebox_progressbar">
    <div class="popup_survey_whitebox_progressbar_inner" style="width:75%;">
        <div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</div>
    </div>
</div>

CSS:

Change margin-top of popup_survey_whitebox_percent :

.popup_survey_whitebox_percent{
    float:right;
    margin-top: -15px;
    font-size:12px;
    font-weight:bold;
    font-style:italic;
    color:#F30;
}

See Fiddle

Answer 2

You could set the margin-left of the percentage values equal to the width of the progress bar.

 $('.popup_survey_whitebox_percent').each(function() { $(this).css('margin-left', $(this).next().next().find('.popup_survey_whitebox_progressbar_inner').css('width')); }); 

 .popup_survey_whitebox_percent { font-size: 12px; font-weight: bold; font-style: italic; color: #F30; margin-top: 5px; } .popup_survey_whitebox_progressbar { background: #444; width: 100%; height: 5px; border-radius: 10px; } .popup_survey_whitebox_progressbar_inner { background: #0CF; width: 100%; height: 5px; border-radius: 10px; box-shadow: 0 3px 7px rgba(0, 0, 0, .25); margin-top: -10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="popup_survey_whitebox_percent">75%</div> <br /> <div class="popup_survey_whitebox_progressbar"> <div class="popup_survey_whitebox_progressbar_inner" style="width:75%;"></div> </div> <div class="popup_survey_whitebox_percent">15%</div> <br /> <div class="popup_survey_whitebox_progressbar"> <div class="popup_survey_whitebox_progressbar_inner" style="width:15%;"></div> </div> <div class="test"></div> 

Answer 3

try this you only need to put your text percentage tag inside the progressbar html tag

div class="popup_survey_whitebox_progressbar">
  <div class="popup_survey_whitebox_progressbar_inner" style="width:75%;">
      <span id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</span>
<br>
      </div>
</div>
<br>
<div class="popup_survey_whitebox_progressbar">
  <div class="popup_survey_whitebox_progressbar_inner" style="width:15%;">
      <span id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">15%</span>
  </div>
</div>

try this http://jsfiddle.net/e4wvyamh/