CODEWITHSUNDEEP
htmlcsstwitter-bootstrapprogress-bar
code-8
code-8

Reputation: 58642

How can I position my percentage in the same line as my progressbar?

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?

enter image description here

I just want to place the percent in the same line as my progress bar.

This is what I have : JSFiddle

Result :

enter image description here

Upvotes: 0

Views: 1645

Answers (3)

Aminesrine
Aminesrine

Reputation: 2140

Try to add float: left to the div that contains the progress bar (his class is progress_type2) and also giv it a width, for example:

.progress_type2 {
  float: left;
  width: 70%;
}

Upvotes: 0

Ricardo Andres
Ricardo Andres

Reputation: 335

Like Aminesrine said, you could use {float: left;} on the progress bar element, but you could also use {display: inline-block;} on both elements or {position: absolute;} on the percentage element.

If you would rather risk the elements overlapping before wrapping into a second line, use {position: absolute; top: 7px; right:0px} and adjust the top/right pixels to fit the design you seek. Remember: whenever you are using absolute positioning, grant the parent container a {position: relative}; in this case, the table cell.

Whatever option you choose, be sure to test compatibility and responsiveness. All three options may have different results.

Upvotes: 0

Nima Parsi
Nima Parsi

Reputation: 2110

Something like this?

Updated JsFiddle

Give the span(the percentage number) and the progress_type2 percentage width and float:left position:

td span{
   float:right;
   width:20%;
   text-align:center;
}
.progress_type2 {
   width:80%;
   float:left;
}

enter image description here

Upvotes: 2

Related Questions