Floated element dropped to next line in ie6/7

i seem to be having a floating issue when floating divs inside a container that also has text in ie6 and ie7.

http://mwl.webgen.gsm.org/discussions/proin-elementum-lectus-eget-est-9/1358/

if you look at the star rating here in FF or ie8+, your see that the stars should be positioned to the left of the container text (the actual rating as a number) but as much as ive tried i cant for the life of me get it work, they just drop down underneath.

I hope this makes sense, I've spent about 4 hours trying different things, setting display to inline-block etc, but to no avail.

This seems to work

<div class="stars" style="width: 150px !important; float: right;">
<span class="starsAverage" style="float: left;">

Ok I got it Mate. Please follow along.

1 - First we remove the "float: left"

DIV.rating .stars SPAN.starsAverage
{
float: left /*remove this*/
}

2 - Again we remove "float: left" and change "display: block" to "display: inline;"

.ui-stars-star
{
float: left; /*remove this*/
display: inline; /*changed from display: block;*/
}

3 - Next we change the width from "8px" to "18px" and add "zoom: 1" to each div

<div class="ui-stars-star ui-stars-star-on" style="width: 18px; zoom:1">

4 - Next we remove the "margin-left: -8px;" from the "a" within the above div

inline style
{
margin-left: -8px; /*remove this*/
}

5 - Now we change the width

DIV.rating
{
width: 260px;
}

6 - Again we change the width

DIV.rating .stars
{
width: 210 !important;
}

And Whola. Here you have it. Time Taken: 2 hours and 31 minutes. I will send you the Bill.

Example Image