Footer Overlapping Dynamically Generated Table

Question

On an aspx page I am working on, a table is being generated server-side, and looks fine on the page. Also, on this page, there is a small footer. The end result is that when the content in the table gets long enough, the table extends past the footer, but the footer does not re-position itself at the bottom of the table. What kind of css magic do I need to add to the style of either the div surrounding the table or the around the footer to make things work?

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

Answer 1

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

Answer 2

Not the ideal solution, but I just moved the footer up into the main content div. Kind of a hack, but it looks fine and the functionality is preserved. Sometimes fighting with css just isn't worth the time...