Overlapping the footer of a dynamically generated table

In the aspx page I'm working on, the table is created server side and looks great on the page. Also, there is a small footer on this page. The end result is that when the content in the table gets long enough, the table moves past the footer, but the footer does not re-align at the bottom of the table. What css magic do I need to add to the styling of any div that surrounds the table or around the footer to get things to work?

Here are some of the offending code:

<div id="contentPlusFooter">
                <div id="content" class="ContentWidth">
                    <div style="margin-left: 10px;">
                        <div id="contentBanner" class="insideContentWidth">
                            <span class="contentBannerTitle">Inventory Tracking Report:</span>
                        </div>
                        <asp:Repeater ID="rptInventory" runat="server">
                            <ItemTemplate>
                                <asp:GridView ID="gvInventory" runat="server" CssClass="insideContentWidth" GridLines="None"
                                    AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" PageSize="20"
                                    EmptyDataText="No inventory items found">
                                    <RowStyle CssClass="rowStyle" />
                                    <AlternatingRowStyle CssClass="altRowStyle" />
                                    <HeaderStyle CssClass="tableHeader" HorizontalAlign="left" />
                                    <Columns>
                                        <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
                                        <asp:BoundField DataField="MinInventoryLevel" HeaderText="Minimum Inventory Level"
                                            SortExpression="MinInventoryLevel" />
                                        <asp:BoundField DataField="CurrentInventoryLevel" HeaderText="Current Inventory Level"
                                            SortExpression="CurrentInventoryLevel" />
                                        <asp:TemplateField HeaderText="Inventory Start Date" SortExpression="InventoryStartDate">
                                            <ItemTemplate>

                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                </asp:GridView>
                                <br />
                            </ItemTemplate>
                        </asp:Repeater>
                    </div>
                </div>
                <rw:adminfooter id="Footer" runat="server" />
            </div>

      

+2


source to share


2 answers


I would wrap your header, content and footer in a 3-row table.



0


source


Not a perfect solution, but I just moved the footer to the main content div. A kind of hack, but it looks great and the functionality is preserved. Sometimes fighting with css just isn't worth the time ...



0


source







All Articles