CSS and Html with Tables and pictures, help please

Hello,

On my blog, i am doing a type of review box where I will put rankings of my VOIP providers. Now i already got the code ready for that and it works perfectly fine. But i want to wrap text and images around my review table. It is not coded with table html but with css and other code. I need help on how i can wrap text around it.

You can see an exampe of what im talking about at http://voipcallsforfreeworldwide.blogspot.com/2009/11/amantel-prepaid-phone-card-service.html

if you scroll down the the post, you can see the little box with the numbers. Now i want the text underneath to be on the left side and wrapping around it.

Please if you can help me it would be great! here is my CSS code:

/************** Rating Styles ***************/
.postbg .ratings,
.commentlist .ratings {
	background: #fff url(images/sidee.gif) repeat-x 0 -150px;
	border: 1px solid #ccc;
	float: right;
	margin: 0 0 10px 10px;
	padding: 10px;
}

.postbg .ratings dl,
.commentlist .ratings dl {
	padding-right: 6.64em;
	position: relative;
}

.postbg .ratings dl dd,
.commentlist .ratings dl dd {
	position: absolute;
	right: 0;
	text-align: right;
	top: 0;
	width: 6.25em;
}

.postbg .ratings dl dd .whole,
.commentlist .ratings dl dd .whole {
	background: #ccc;
	height: 1em;
	left: 0;
	position: absolute;
	top: .3125em;
	width: 60px;
}

.postbg .ratings dl dd .whole .percent,
.commentlist .ratings dl dd .whole .percent {
	background: #6bd;
	font-size: 0;
	height: 100%;
	left: 0;
	position: absolute;
	text-align: left;
	text-indent: -9999em;
	top: 0;
}

/********** Easy Clearing **************/
.postbg,
.commentlist li,
#commentform dl {
	_height: 1px;
	min-height: 0;
}

.postbg:after,
.commentlist li:after,
#commentform dl:after {
	clear: both; 
	content: "."; 
	display: block; 
	height: 0; 
	visibility: hidden;
}

/* Secondary class needed for comparison engine to span across entire page */
#comparison_container{ margin-top:6em; }
.comparison { width:840px; padding:0; }

HTML:

That is the CSS Code, and in my post I have:

<div class="postbg">
<div class="ratings">

<dl>
<dt>Overall Rating</dt>
<dd><span class="rating">3.5</span> <span class="whole"><span class="percent" style="width:70%">(70%)</span></span></dd></dl>
<dl>
<dt>Sound Quality</dt>
<dd><span class="rating">3.3</span> <span class="whole"><span class="percent" style="width:66%">(66%)</span></span></dd></dl>
<dl>
<dt>Reliability</dt>
<dd><span class="rating">3.2</span> <span class="whole"><span class="percent" style="width:65%">(65%)</span></span></dd></dl>
<dl>
<dt>Ease of Use</dt>
<dd><span class="rating">3.8</span> <span class="whole"><span class="percent" style="width:75%">(75%)</span></span></dd></dl>
<dl>
<dt>Features</dt>
<dd><span class="rating">3.6</span> <span class="whole"><span class="percent" style="width:72%">(72%)</span></span></dd></dl>
<dl>
<dt>Customer Service</dt>
<dd><span class="rating">3.3</span> <span class="whole"><span class="percent" style="width:65%">(65%)</span></span></dd></dl>
<dl>
<dt>Price</dt>
<dd><span class="rating">4.0</span> <span class="whole"><span class="percent" style="width:79%">(79%)</span></span></dd></dl>
</div>
</div>

HTML:

Also i cannot seem to get rid of the extra space on the top of the OVERALL RATING. If someone can shed some light i would be grateful.
Thanks

 

i am not sure about it but make margin: 0px 0px 0px 0px;

for extra spces

 

did you solve it by now?

 

yes thanks