CSS Text wrap around Images

I have 2 images, one float:left & other float:right. I have text in the middle. I want text to wrap around the images. Here's the HTML & CSS. With this The text comes below the images, inspite of using clear:both on the text div. What am i doing wrong?

 <div id="trial" style="border:1px #F5F5F6 solid; width:40%; height:100px; margin-bottom:10px;">
    <img src="http://graph.facebook.com/528409771/picture" style="padding:5px;"> </img>
    <img src="facebook_icon.gif" style="float:right; padding:3px;"></img>

    <div id="content" style="font-size:12px; padding-bottom:5px; clear:both;">
        <span style="color:grey;"> from: </span> <a href="http://touch.facebook.com/profile.php?id=63441126719">A.R.Rahman</a><br>        <span style="color:grey;"> I am very grateful to the <b style="color:black;">Hollywood </b> Foreign Press, for recognizing our film. To collaborate with Danny Boyle is a joy in itself, and to receive  recognition for the score makes it all the more joyous. This is a blessing beyond words.</span>
    </div> 
    <span style="font-size:10px;"><a style="color:#476B00;" href="http://touch.facebook.com/profile.php?id=63441126719">http://touch.facebook.com/profile.php?id=63441开发者_JAVA技巧126719</a></span>
    <span style="font-size:9px; float:right; clear:both; color:grey;">34 seconds ago</span>
</div>

Try this:

<div id="trial" style="border:1px #F5F5F6 solid; width:40%; height:100px; margin-bottom:10px;">
    <img src="http://graph.facebook.com/528409771/picture" style="padding:5px; float:left;" />
    <img src="facebook_icon.gif" style="float:right; padding:3px;" />

    <div id="content" style="font-size:12px; padding-bottom:5px;">
        <span style="color:grey;"> from: </span> <a href="http://touch.facebook.com/profile.php?id=63441126719">A.R.Rahman</a><br>        <span style="color:grey;"> I am very grateful to the <b style="color:black;">Hollywood </b> Foreign Press, for recognizing our film. To collaborate with Danny Boyle is a joy in itself, and to receive  recognition for the score makes it all the more joyous. This is a blessing beyond words.</span>
    </div> 
    <span style="font-size:10px;"><a style="color:#476B00;" href="http://touch.facebook.com/profile.php?id=63441126719">http://touch.facebook.com/profile.php?id=63441126719</a></span>
    <span style="font-size:9px; float:right; clear:both; color:grey;">34 seconds ago</span>
</div>

1. I've cleaned up your image tags (they don't need </img> - just a /> at the end of the img tag)

2. I removed the clear:both - you don't need that if you want the text to wrap around the images.

3. I added float:left to the first image to also enable the text to wrap around that.

I'd also suggest using a separate style sheet than putting all your styles inline.

The clear:both is part of the problem. clear says I don't want any floats next to me, so you want to remove that, and the first image isn't floated left.