Layout Problem on DataList at Asp.Net

Answer 1

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.

Answer 2

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>
            <a href="#">link</a>
        </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>
            <a href="#">link</a>
        </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>
            <a href="#">link</a>
        </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.