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.

However this is the result:

result

and here is the code for ListView:

 <ItemTemplate>
   <img style="float: right;" alt="" src='<%# Eval("Gender","./img/{0}.png") %>' />
   <span>??? ????:</span><%# Eval("FirstName") %>&nbsp;<%# Eval("LastName") %>
   <span dir="ltr">(<%# Eval("Email") %>)</span><br />
   <span>???? ?? ?? ???:</span>  <%#Eval("Relationship")%><br/>
</ItemTemplate>

I set the style of <img> 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?

1 answer

o.k.w 2355
1
point
This was chosen as the best answer

Give this a try, see if it works (wrapping all in a <div> with clear: both):

<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>

UPDATE:
Tried out the codes on IE8, FF3.5, Safari (Win), seems to work (sorry I used your gravatar :P ):

Output

Answered about 7 years ago by o.k.w
  • thank you it is working but in asp.net(if you are familiar) there is a <ItemSeparatorTemplate> tag that I set it to: <ItemSeparatorTemplate> <hr /> </ItemSeparatorTemplate> so the problem of your answer is about ItemSeparator. the HR tag place below the texts not Below the image. But I fix it with this:<hr style="clear:right;" /> and now it is working fully! thank you very much. mahdiahmadirad about 7 years ago
  • @mahdiahmadirad: Yes I am familiar with ASP.NET. Glad you found a way around my answer. :) o.k.w about 7 years ago