php & css - percentage bars with text

[Desbrina]

I think this is more of a css problem than php thats why its here

I can get percentage bars to work without text on them, but not with text, the bar is either pushed below the text, or the text is pushed onto 3-4 lines, depending on how wide the bar is

So far i have:

The php

while($row = $db->sql_fetchrow($result))
{
	$poke[] = '<div class="poke'.$i.'"><img src="'.$row['url'].'" alt="'.$row['name'].'" />'."\n";

$per = ($row['hatch'] == '0') ? ($row['maturatity'] / $row['levelexp']) * 100 : ($row['maturatity'] / $row['hatch']) * 100;
$text = ($row['hatch'] == '0') ? $row['maturatity'] . " / " . $row['levelexp'] : $row['maturatity'] . " / " . $row['hatch'];

$poke[] = "<br/><br/>";

$poke[] = '<div class="percentage">'.$text.' ('.round($per, 2).'%)
	<div class="perc" style="width:'.$per.'%;"></div>
</div>'."\n";

$poke[] = '</div>'."\n";
$i++;
}

The css

.percentage {
	background-color:#800000;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px solid #000;
	height:15px;
	font-size:10px;
	z-index:2;
}

.perc {
	visibility:visible;
	height:15px;
	z-index:3;
	background-color:#000; 
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

This is how it looks with that code

[Weedpacket]

<div class="percentage"><div class="perc" style="width:10&#37;"></div><span style="position:absolute;left:10px;">10/100 (0%)</span></div>

Obviously you'd make a CSS rule for that instead of doing it inline, and there'd probably be a bit of tweaking involved, but it gives you an idea.

[Desbrina]

ok, i've now got the percent bar in the correct place, but the text appears below, and at the left