Layout is being pushed because of the description - asp.net

Question

I am using DataList control to show three products per line horizontally. But there is layout problem and it pushes up the product image container element like the below :
Data List Layout problem http://www.pixelshack.us/images/wwmlzkvhxsr7b2l0ptcl.jpg
Here is the code :
<asp:DataList ID="dlProducts" runat="server" RepeatColumns="3" RepeatLayout="Table"
DataSourceID="ObjectDataSourceCategories" RepeatDirection="Horizontal" CellSpacing="10" CellPadding="0" HorizontalAlign="Center" ItemStyle-Wrap="true">
<ItemTemplate>
<a href='<%# "Items.aspx?catId=" + (string)Eval("id") %>'>
<asp:Image ID="Image1" CssClass="photo-border photo-float-left" runat="server" Width="165px"
Height="120px" ImageUrl='<%# "ProductImages/Thumbnails/" + (string)Eval("ImageUrl") %>'
AlternateText='<%#(string)Eval("ImageAltText")%>' /></a>
<br />
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl='<%# "Items.aspx?catId=" + (string)Eval("id") %>'
Text='<%# Eval("Title").ToString()%>' Font-Bold="true" />
</ItemTemplate>
</asp:DataList>
How can I get over the problem ?
Thanks in advance.

Answer 1

I was having a similar issue. I ended up having to break the linked image and and text into their own div and style them accordingly:
<ItemTemplate>
<div class="outer">
<div class="top">
<asp:HyperLink id="hlImage" runat="server" CssClass="Font7">
</asp:HyperLink>
</div>
<div class="bottom">
<asp:Label id="lbText" runat="server" CssClass="Font7"></asp:Label>
</div>
</div>
</ItemTemplate>
I'm sure there are cleaner ways to do this and this is just example of what the HTML output might look like. This is just "off the cuff" but if you put in an empty htm file it will display.
<div style="width: 100px;">
<!-- first row -->
<div style="float:left; width:50px; border: 2px solid black;">
<div>
link
</div>
<div style="height:50px; background-color:Aqua; vertical-align:bottom;">
<span>text</span>
</div>
</div>
<div style="float:left; width:50px; border: 2px solid black;">
<div>
link
</div>
<div style="background-color: Aqua;">
<span style="height:50px; vertical-align:bottom;">text</span>
</div>
</div>
<!-- second row -->
<div style="float:left; width:50px; border: 2px solid black;">
<div>
link
</div>
<div style="height:50px; background-color:Aqua; vertical-align:bottom;">
<span>text</span>
</div>
</div>
</div>
You can most likely use RepeatLayout="Flow" ItemStyle="float:left;" in your DataList control to help as well.

Answer 2

I'm not sure off the top of my head how to fix this, but I would start by putting each item in a <div> or <span> and use CSS classes, instead of the control's styling. E.g.:
<Item Template>
<div class="myClass">...</div>
</Item Template>
Using this with Firebug to then debug is usually easier than figuring out how you're violating the control's height, etc.