Listview has gaps when display images

[Tonyz289]

I have a listview that has gaps in the display (see attached). Why?
Here is the code displaying the listview

<telerik:RadListView ID="RadListView1" runat="server" AllowPaging="True" ItemPlaceholderID="PlaceHolder1"
    OnItemCreated="RadListView1_ItemCreated" DataKeyNames="id,filenameextension,typeAbbr,title" onneeddatasource="RadListView1_NeedDataSource" >
    <LayoutTemplate>
        <div class="RadListView RadListViewFloated RadListView_Windows7">
            <telerik:RadDataPager ID="RadDataPager1" runat="server" Skin="Sitefinity" PageSize="25"
                PagedControlID="RadListView1" BorderWidth="0" OnFieldCreated="RadDataPager1_FieldCreated">
                <Fields>
                    <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                    <telerik:RadDataPagerButtonField FieldType="Numeric" />
                    <telerik:RadDataPagerButtonField FieldType="NextLast" />
                    <telerik:RadDataPagerPageSizeField PageSizeText="Page size: " />
                    <telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go"
                        TextBoxWidth="15" />
                    <telerik:RadDataPagerTemplatePageField>
                        <PagerTemplate>
                            <div style="float: right">
                                <b>Total Number of Assets Found:
                                    <asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount%>" />
                                </b>
                            </div>
                        </PagerTemplate>
                    </telerik:RadDataPagerTemplatePageField>
                </Fields>
            </telerik:RadDataPager>
            <asp:PlaceHolder id="PlaceHolder1" runat="server" />
        </div>
    </LayoutTemplate>
    <ItemTemplate>
        <div style="float: left; width: 200px">
                <div class="myClass" style="border: 0px; white-space: normal; margin: 5px 5px 5px 5px; padding: 2px 2px 2px 2px; background: #eeeeee; text-align: center; width: 190px;">
                    <asp:HyperLink ID="HyperLink1" runat="server">
                        <telerik:RadBinaryImage ID="RadBinaryImage1" runat="server" AutoAdjustImageControlSize="False"
                            CssClass="myClass" ImageUrl='<%# Eval("thumbUrl") %>' ResizeMode="Fit" AlternateText="Click to view preview"
                            ToolTip="Click to view preview" Width="150px" Height="150px" />
                    </asp:HyperLink><br />
                <asp:CheckBox ID="chkImage" runat="server" style="float: left;"/><small><asp:HyperLink ID="lnkAsset1" runat="server" Visible="false" style="float: left;" >
                                    </asp:HyperLink><asp:HyperLink ID="lnkAsset2" runat="server" style="float: left;" Visible="false" >
                                    </asp:HyperLink><asp:HyperLink ID="lnkAsset3" runat="server" style="float: left;" >
                                    </asp:HyperLink></small>
                <asp:HiddenField ID="hiddenAssetId" Value='<%# Eval("id") %>' runat="server" />
            </div>
        </div>
    </ItemTemplate>
    <EmptyDataTemplate>
        No Assets Found
    </EmptyDataTemplate>
</telerik:RadListView>

[Richard]

Tony:

It's quite probable that your gaps are caused by nulls in the data source, or possibly by items with missing images.

You can use RadListView's "EmptyDataTemplate" to format the gaps.

<telerik:RadListView ID="RadListView4" DataSourceID="SqlDataSource1" runat="server"
    ItemPlaceholderID="EmployeesContainer">
    <EmptyDataTemplate>
        <fieldset style="width: 930px">
            <legend>Customers</legend>No records for customers available.
        </fieldset>
    </EmptyDataTemplate>
</telerik:RadListView>

Hope this helps!