Problem with CSS(floating) in ListView ItemTemplate! - asp.net

Question

i am new in CSS and have a problem with styling ListView Control in ItemTemplate tag.
my project language is rtl(persian) and i want to set the user image at the right and her/his infos to the left of the image.
but this is the result:
alt text http://sites.google.com/site/mahdiahmadirad/download-1/2009-12-08_134217.png?attredirects=0&d=1
and here is the code for ListView:
<asp:ListView ID="NokListView" runat="server" DataSourceID="ObjectDataSource1">
<LayoutTemplate>
<img alt="" src="./img/group.png"><br />
<br />
<fieldset>
<legend>ليست کلي</legend>
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</fieldset>
</LayoutTemplate>
<ItemSeparatorTemplate>
<hr />
</ItemSeparatorTemplate>
<ItemTemplate>
<img style="float: right;" alt="" src='<%# Eval("Gender","./img/{0}.png") %>' />
<span>نام وارث:</span><%# Eval("FirstName") %> <%# Eval("LastName") %><span
dir="ltr">(<%# Eval("Email") %>)</span><br />
<span>نسبت او با شما:</span>
<%# Eval("Relationship")%><br />
</ItemTemplate>
</asp:ListView>
I set the style of to float:right and it is working but as you see the template is like a Hierarchical list!
I want each Item place below the previous Item NOT in the front of.
please explain me what is exactly happening?! and how to fix it?

Answer 1

Put the non-image data together in a div with float:left and see if that works?

Answer 2

I Found My Answer here: doctype.com
and the complete fixed code is:
<ItemSeparatorTemplate>
<hr style="clear:right;" />
</ItemSeparatorTemplate>
<ItemTemplate>
<div style="clear: both;">
<img style="float: right;" alt="" src='<%# Eval("Gender","./img/{0}.png") %>' />
<span>نام وارث:</span><%# Eval("FirstName") %> <%# Eval("LastName") %>
<span dir="ltr">(<%# Eval("Email") %>)</span><br />
<span>نسبت او با شما:</span><%# Eval("Relationship")%><br />
</div>
</ItemTemplate>
So Look at the result:
alt text http://sites.google.com/site/mahdiahmadirad/download-1/2009-12-09_103134.png?attredirects=0&d=1