Quick CSS width problem.

[iCookiehost]

Hello, I've placed a definition list bar within a table used to list the servers which my community has, but I've hit a dead end because when the server is about 90%+ full the text moves out of the bar and begins to overlap other things. I know there must be a stupid problem so here is my CSS code:

[css]
dl {
margin:0;
width:175px;
height:auto;
background:#fff bottom left no-repeat;
}
dd {
margin:0;
display:block;
width:175px;
height: 2em;
background:#0a0;
}
dd b {
float:right;
display:block;
margin-left:auto;
background:#cec;
height:2em;
line-height:2em;
text-align:right;
color: #444;
}
dd.s0 b {width:35%;}
dd.s1 b {width:0%;}
dd.s2 b {width:78%;}
dd.s3 b {width:100%;}
dd.s4 b {width:100%;}
[/css]

Now this is my HTML Table code:
[html]
<table class="bordered">
<tr>
<th>Server Name</th>
<th>Map</th>
<th>Percentage</th>
<th>Players</th>
</tr>
<tr>
<td>Dark-Fraction.com - Serious Army Roleplay 3.0 [FastDL]</td>
<td>rp_catalyst_v1</td>
<td><dl> <dd class="s0"><b>65% </b></dd> </dl></td>
<td>26/40</td>
</tr>
<tr>
<td>Dark-Fraction.com - [TTT][24/7][UK][FastDL]</td>
<td>ttt_67thway_v3</td>
<td><dl> <dd class="s1"><b>100% </b></dd> </dl></td>
<td>24/24</td>
</tr>
<tr>
<td>Dark-Fraction.com - Half-Life 2 Roleplay</td>
<td>rp_industrial17_beta6</td>
<td><dl> <dd class="s2"><b>22% </b></dd> </dl></td>
<td>7/32</td>
</tr>
<tr>
<td>Dark-Fraction.com - [TTT][24/7][US][FastDL]</td>
<td>de_chateau</td>
<td><dl> <dd class="s3"><b>0% </b></dd> </dl></td>
<td>0/24</td>
</tr>
<tr>
<td>Dark-Fraction.com - Semi-Serious PERP 3 - $15K Start</td>
<td>RP_EvoCity_v33x</td>
<td><dl> <dd class="s4"><b>0% </b></dd> </dl></td>
<td>0/50</td>
</tr>
</table>
[/html]

The table code is created using PHP so the figures are automatically filled in et cetera.

How it should be: [img]http://puu.sh/2qcLs.png[/img]
How it actually is: [img]http://puu.sh/2qcMd.png[/img]
Obviously I want the dark-green bar to cover it 100% if it is 100%, but I want the text to remain on top.

For a live view see head [url=http://5.178.64.246/]here[/url].

Thanks!

[CBastard]

Edit: Fixed it:

Remove the 'b's from where it sets the widths:

[HTML]
<style type="text/css">
dd.s0 {width:40%;}
dd.s1 {width:0%;}
dd.s2 {width:84%;}
dd.s3 {width:100%;}
dd.s4 {width:100%;}
</style>
[/HTML]

Change the CSS in the CSS file to:

dl {
	margin:0;
	width:175px; 
	height: 2em;
	background:#0a0;
}
dd {
	float: right;
	margin:0; 
	display:block; 
	height: 2em;
	background:#cec; 
 }
dd b {
	float:right;
	display:block; 
	margin-left:auto; 
	height:2em;
	line-height:2em; 
	text-align:right;
	color: #444;
 }

[iCookiehost]

[QUOTE=CBastard;40084789]Edit: Fixed it:

Remove the 'b's from where it sets the widths:

[HTML]
<style type="text/css">
dd.s0 {width:40%;}
dd.s1 {width:0%;}
dd.s2 {width:84%;}
dd.s3 {width:100%;}
dd.s4 {width:100%;}
</style>
[/HTML]

Change the CSS in the CSS file to:

dl {
	margin:0;
	width:175px; 
	height: 2em;
	background:#0a0;
}
dd {
	float: right;
	margin:0; 
	display:block; 
	height: 2em;
	background:#cec; 
 }
dd b {
	float:right;
	display:block; 
	margin-left:auto; 
	height:2em;
	line-height:2em; 
	text-align:right;
	color: #444;
 }

[/QUOTE]

This works, thank you very much man!

[CBastard]

[QUOTE=iCookiehost;40085054]This works, thank you very much man![/QUOTE]

No problem.