asp .net Gridview height overflows into next div - asp.net

Question

I am having a Gridview inside a div tag
and there is a div below this div tasg containg other contents.
If I don't set the Gridview div height then the contents of GV overflows into parts present below the GV.
Else if I set, when the records are less, there would be a empty block after the GV. How do I solve this. Please have look at the code ...
<div style="height: 100%; width: 785px; margin-top: 0px; overflow: hidden; display: table;">
<tr>
<td>
<asp:GridView ID="dgAccessGrp" runat="server" Style="z-index: 101; left: 13px; position: absolute;
margin-top: 0px; width: 686px;" AutoGenerateColumns="False" DataKeyNames="access_group_id"
AllowPaging="True" RowStyle-Height="20px" CellPadding="3" CellSpacing="1" OnRowCancelingEdit="accessGrp_RowCancelingEdit"
OnRowDeleting="accessGrp_RowDeleting" OnRowEditing="accessGrp_RowEditing" OnRowUpdating="accessGrp_RowUpdating"
OnPageIndexChanging="dgAccessGrp_PageIndexChanging" OnRowCommand="dgAccessGrp_RowCommand"
OnRowDataBound="dgAccessGrp_RowDataBound" Font-Bold="False">
<Columns>
<asp:TemplateField HeaderText="SI No">
<ItemTemplate>
<asp:Label ID="lblAccessGrpID" runat="server" Width="70px" Text="<%# Bind('access_group_id') %>"
Visible="false"></asp:Label>
<asp:Label ID="lblSIno" runat="server" Width="15px" Text="<%#Container.DataItemIndex+1 %>"></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
<HeaderStyle HorizontalAlign="Left" BackColor="#006699" Font-Names="arial,helvetica,sans-serif"
Font-Size="8pt" ForeColor="White" />
<ControlStyle Font-Names="Arial" Font-Size="8pt" />
</asp:TemplateField>
<asp:BoundField DataField="access_group_id" Visible="False" />
<asp:TemplateField HeaderText="Access group">
<ItemTemplate>
<asp:LinkButton ID="btnSelect" CommandArgument='<%# Bind("access_group_id") %>' CommandName='SelectAccessGroup'
Text='<%# Bind("access_group_name") %>' runat="server" Width="90px"></asp:LinkButton>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtAccessGrp" MaxLength="50" runat="server" Width="90px" Text='<%# Bind("access_group_name") %>'> </asp:TextBox>
</EditItemTemplate>
<HeaderStyle HorizontalAlign="Left" BackColor="#006699" Font-Names="arial,helvetica,sans-serif"
Font-Size="8pt" ForeColor="White" />
<ControlStyle Font-Names="Arial" Font-Size="8pt" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Business Unit">
<ItemTemplate>
<asp:Label ID="lblBU" runat="server" Width="70px" Text="<%# Bind('bu_name') %>"></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="lblBU" runat="server" Width="70px" Text="<%# Bind('bu_id') %>" Visible="false"></asp:Label>
<asp:Label ID="lblIsActiveBU" runat="server" Width="70px" Text="<%# Bind('bu_active') %>"
Visible="false"></asp:Label>
<asp:DropDownList ID="dgDrpBU" runat="server" DataValueField="bu_id" DataTextField="bu_name">
</asp:DropDownList>
</EditItemTemplate>
<HeaderStyle HorizontalAlign="Left" BackColor="#006699" Font-Names="arial,helvetica,sans-serif"
Font-Size="8pt" ForeColor="White" />
<ControlStyle Font-Names="Arial" Font-Size="8pt" />
</asp:TemplateField>
<asp:TemplateField HeaderText="BU Line">
<ItemTemplate>
<asp:Label ID="lblBULine" runat="server" Width="70px" Text="<%# Bind('business_line_name') %>"></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="lblBULine" runat="server" Width="70px" Text="<%# Bind('business_line_id') %>"
Visible="false"></asp:Label>
<asp:Label ID="lblIsActiveBULine" runat="server" Width="70px" Text="<%# Bind('business_line_active') %>"
Visible="false"></asp:Label>
<asp:DropDownList ID="dgDrpBULine" runat="server" DataValueField="business_line_id"
DataTextField="business_line_name">
</asp:DropDownList>
</EditItemTemplate>
<HeaderStyle HorizontalAlign="Left" BackColor="#006699" Font-Names="arial,helvetica,sans-serif"
Font-Size="8pt" ForeColor="White" />
<ControlStyle Font-Names="Arial" Font-Size="8pt" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Location">
<ItemTemplate>
<asp:Label ID="lblLocation" runat="server" Width="70px" Text="<%# Bind('location') %>"></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="lblLocation" runat="server" Width="70px" Text="<%# Bind('location_id') %>"
Visible="false"></asp:Label>
<asp:Label ID="lblIsActiveStatus" runat="server" Width="70px" Text="<%# Bind('status') %>"
Visible="false"></asp:Label>
<asp:DropDownList ID="dgDrpBULocation" runat="server" DataValueField="location_id"
DataTextField="location">
</asp:DropDownList>
</EditItemTemplate>
<HeaderStyle HorizontalAlign="Left" BackColor="#006699" Font-Names="arial,helvetica,sans-serif"
Font-Size="8pt" ForeColor="White" />
<ControlStyle Font-Names="Arial" Font-Size="8pt" />
</asp:TemplateField>
<asp:CommandField ButtonType="Image" CancelImageUrl="~/IMAGEs/cross.gif" EditImageUrl="~/IMAGEs/edit.gif"
EditText="" HeaderText="" ShowEditButton="True" UpdateImageUrl="~/IMAGEs/check.gif"
UpdateText="">
<ControlStyle Font-Names="Arial" Font-Size="8pt" />
<HeaderStyle BackColor="#006699" Font-Names="Arial" Font-Size="8pt" ForeColor="White" />
<ItemStyle Width="30px" />
</asp:CommandField>
<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:LinkButton ID="btnDelete" CommandArgument='<%# Bind("access_group_id") %>' OnClientClick="return confirm('Are you sure you want to delete this record?');"
runat="server" Width="60px" CommandName="Delete">Delete</asp:LinkButton>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" Width="50px" />
<HeaderStyle HorizontalAlign="Left" BackColor="#006699" Font-Names="arial,helvetica,sans-serif"
Font-Size="8pt" ForeColor="White" />
<ControlStyle Font-Names="Arial" Font-Size="8pt" />
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="Yellow" />
<PagerSettings Position="TopAndBottom" />
<PagerStyle Wrap="True" BackColor="#CCCCCC" HorizontalAlign="Center" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:pt7dataConnectionString %>"
SelectCommand="SELECT access_group_name, is_active, access_group_id, last_modified_by, date_stamp, bu_id, business_line_id, location_id FROM tbl_car_access_groups ORDER BY access_group_id DESC">
</asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:pt7dataConnectionString %>"
SelectCommand="Select bu_id,bu_name from tbl_car_bu ORDER BY bu_name ASC"></asp:SqlDataSource>
</td>
</tr>
</div>
<div id="detailArea">
<br />
<asp:Label ID="lblError" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="9pt"
ForeColor="White" Visible="False" BackColor="#E2001A"></asp:Label>
<table style="height: 347px; width: 915px;">
<tr>
<td valign="top" bgcolor="#E1FFE1" style="border: 2px solid #808285">
<table>
<tr>
<td class="style26" style="font-family: Arial; color: #003b6a; font-size: 12px; font-weight: bold"
valign="bottom">
Select User(s) Below :
</td>
</tr>
<tr>
<td class="style17" valign="top">
<asp:ListBox ID="lbAllUsers" runat="server" Font-Names="Arial" Font-Size="9pt" Height="227px"
Width="432px" SelectionMode="Multiple"></asp:ListBox>
</td>
</tr>
<tr>
<td class="style27">
<asp:Button ID="btnAddToMemberList" runat="server" Text="Add Selected User(s) To 'Group Members' List"
BackColor="#215F8B" BorderColor="#A2BAD2" BorderStyle="Solid" Font-Bold="True"
Font-Names="Arial" Font-Size="9pt" ForeColor="White" Width="346px" Height="23px"
OnClick="btnAddToMemberList_Click" OnClientClick="return AddUserToList()" />
</td>
</tr>
<tr>
<td class="style27">
<asp:Button ID="btnAddToGAList" runat="server" Text="Add Selected User(s) To 'Group Administrators' List"
BackColor="#215F8B" BorderColor="#A2BAD2" BorderStyle="Solid" Font-Bold="True"
Font-Names="Arial" Font-Size="9pt" ForeColor="White" Width="346px" Height="23px"
OnClick="btnAddToGAList_Click" OnClientClick="return AddUserToList()" />
</td>
</tr>
<tr>
<td class="style27">
<asp:Button ID="btnAddToGDList" runat="server" Text="Add Selected User(s) To 'Delgated Responsibility' List"
BackColor="#215F8B" BorderColor="#A2BAD2" BorderStyle="Solid" Font-Bold="True"
Font-Names="Arial" Font-Size="9pt" ForeColor="White" Width="346px" Height="23px"
OnClick="btnAddToGDList_Click" OnClientClick="return AddUserToList()" />
</td>
</tr>
</table>
</td>
<td valign="top" bgcolor="#FFEFB0" style="border: 2px solid #808285" class="style31">
<table>
<tr>
<td class="style28" style="font-family: Arial; color: #003b6a; font-size: 12px; font-weight: bold"
valign="bottom">
Group Members :
</td>
</tr>
<tr>
<td class="style29" valign="top">
<asp:ListBox ID="lbMembers" runat="server" Font-Names="Arial" Font-Size="9pt" Height="227px"
Width="432px" SelectionMode="Multiple"></asp:ListBox>
</td>
</tr>
<tr>
<td class="style30">
<asp:Button ID="btnDelMember" runat="server" Text="Remove Selected Member(s)" BackColor="#215F8B"
BorderColor="#A2BAD2" BorderStyle="Solid" Font-Bold="True" Font-Names="Arial"
Font-Size="9pt" ForeColor="White" Width="212px" Height="23px" OnClick="btnDelMember_Click"
OnClientClick="return DelMembers()" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="border: 2px solid #808285; width: 913px; background-color: #FFEFB0;">
<tr>
<td>
<table>
<tr>
<td style="font-family: Arial; color: #003b6a; font-size: 12px; font-weight: bold"
valign="bottom">
Group Administrators :
</td>
<td style="font-family: Arial; color: #003b6a; font-size: 12px; font-weight: bold"
valign="bottom">
Delegated Responsibility To :
</td>
</tr>
<tr>
<td>
<asp:ListBox ID="lbGAs" runat="server" Font-Names="Arial" Font-Size="9pt" Height="227px"
Width="432px" SelectionMode="Multiple"></asp:ListBox>
</td>
<td>
<asp:ListBox ID="lbGDs" runat="server" Font-Names="Arial" Font-Size="9pt" Height="227px"
Width="432px" SelectionMode="Multiple"></asp:ListBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnDelGA" runat="server" Text="Remove Selected User(s)" BackColor="#215F8B"
BorderColor="#A2BAD2" BorderStyle="Solid" Font-Bold="True" Font-Names="Arial"
Font-Size="9pt" ForeColor="White" Width="212px" Height="23px" OnClick="btnDelGA_Click"
OnClientClick="return DelGAs()" />
</td>
<td>
<asp:Button ID="btnDelGD" runat="server" Text="Remove Selected User(s)" BackColor="#215F8B"
BorderColor="#A2BAD2" BorderStyle="Solid" Font-Bold="True" Font-Names="Arial"
Font-Size="9pt" ForeColor="White" Width="212px" Height="23px" OnClick="btnDelGD_Click"
OnClientClick="return DelGDs()" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td style="font-family: Arial; color: #003b6a; font-size: 12px; font-weight: bold">
Name/Email Pairs - Can be pasted into Outlook : (Press Ctrl+A within box to
select all) <asp:TextBox ID="tbUserNames" runat="server" Height="140px" TextMode="MultiLine"
Width="881px" ReadOnly="True"></asp:TextBox>
<br />
<br />
<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
</div>

Answer 1

Set the minimum height of the div containing your gridview.
Also set the overflow property to auto of the gridview div
You can refer these links
Mysterious min-height behavior
CSS Max Height Property

Answer 2

Problem in Style you have added to gridview
Please remove "position: absolute" attribute from your style.