creating a product score value - html

Question

im new to css and html i wanna cr8 a product box value like this
http://i.imgur.com/kMogtMz.png
I tried with these but didn't get any result.
I want .fill class to be dynamically modifiable.
Anyone can help me ?
.box {
width: 250px;
height: 30px;
background: grey;
color: white
}
.box .fill {
float: left;
width: 78%;
background: orange;
height: 100%;
}
.box .empty {
position: absolute;
white-space: nowrap;
right: 10px
}
.box .fill-badge {
position: absolute;
padding-left: 10px;
line-height: 30px
}
.box .empty-badge {
padding-right: 10px;
line-height: 30px;
}
<div class="box">
<div class="fill"><div class="fill-badge">Radeon 7870</div></div>
<div class="empty"><div class="empty-badge">125.6 GB/S</div></div>
</div>

Answer 1

You just need to look at your absolute and relative positioning. Make sure that all elements that are absolutely positioned are inside an element with relative defined as a position. So in this case you just need to add position: relative; to the .box.
.box {
width: 250px;
height: 30px;
background: grey;
color: white;
position: relative;
}
.box .fill {
float: left;
background: orange;
height: 100%;
}
.box .empty {
float: right;
white-space: nowrap;
right: 10px
}
.box .fill-badge {
position: absolute;
left: 0;
padding-left: 10px;
line-height: 30px
}
.box .empty-badge {
position: absolute;
right: 0;
padding-right: 10px;
line-height: 30px;
}
<div class="box">
<div class="fill" style="width:60%;">
<div class="fill-badge">Radeon 7870</div>
</div>
<div class="empty">
<div class="empty-badge">125.6 GB/S</div>
</div>
</div>
Edited to show inline style.

Answer 2

You must set the .box position to relative. http://jsfiddle.net/Lzmop76a/
.box {
width: 250px;
height: 30px;
background: grey;
color: white
position: relative;
}

Answer 3

I would do it using a background color and a background image for the same element like:
.box {
width: 240px;
padding: 0 5px;
height: 30px;
line-height: 30px;
background: #fa0 url(http://placehold.it/250x300/aaa) 200px 0 no-repeat;
color: white;
}
.box span{
float:right;
}
<div class="box">
Radeon 7870 <span>125.6 GB/S</span>
</div>