Q:

CSS for making simple graph

I have to make a graph using simple CSS. In this graph, a background color of grey is displayed and on top of it, varying a background color of blue is displayed of varying width showing the number of items loaded. Please refer to my jsfiddle for this example. It is located at http://jsfiddle.net/mzCdb/1/ . 
The problem with my code is that I want the "4/10" overlapping between teh blue and the grey portion when the width of the blue portion is 50% unlike the second graph in my fiddle. The following is my html code :-
<div class="graph">
<div class="graph-within">
</div>
<div style="text-align:center;float:left;color:#888;font-weight:bold;
font-family:Tahoma;font-size:15px;">4/10</div>
</div>

Please view the CSS code from the fiddle. Any help will be appreciated. Thanks in advance.

A:

You could absolutely position the text within the graph:
.graph .text {
    position: absolute;
    z-index: 1;
    top: 0;
    height: 25px;
    text-align: center;
    width: 100px;
}

DEMO

