title: how do i make my gridview to fit 100% on page
body: <p>How do i make my gridview's to fit nicely within the screen.
  I added this property width="100%" i. However my gridview still extends way beyond my header's width which i have set it as 100%.</p>
  
  <p><img src="https://i.stack.imgur.com/xv67J.png" alt="enter image description here"></p>
  
  <p>Here are my source code of my gridview for the first attempt. </p>
  
  <pre><code>&lt;asp:GridView ID="GWCase" runat="server"  Top="0%" Width="100%" BackColor="#CCCCCC" BorderColor="#999999" BorderStyle="Solid" BorderWidth="3px" CellPadding="4" CellSpacing="2" ForeColor="Black" Height="199px" AutoGenerateSelectButton="True" OnSelectedIndexChanged="GWCase_SelectedIndexChanged"&gt;
  
      &lt;FooterStyle BackColor="#CCCCCC" /&gt;
      &lt;HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" /&gt;
      &lt;PagerStyle BackColor="#CCCCCC" ForeColor="Black" HorizontalAlign="Left" /&gt;
      &lt;RowStyle BackColor="White" /&gt;
      &lt;SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" /&gt;
      &lt;SortedAscendingCellStyle BackColor="#F1F1F1" /&gt;
      &lt;SortedAscendingHeaderStyle BackColor="#808080" /&gt;
      &lt;SortedDescendingCellStyle BackColor="#CAC9C9" /&gt;
      &lt;SortedDescendingHeaderStyle BackColor="#383838" /&gt;
  &lt;/asp:GridView&gt;
  </code></pre>
  
  <p>I tried using the css method like this </p>
  
  <pre><code>&lt;ul id="assigngw"&gt;
  &lt;asp:GridView ID="GWCase" runat="server"  Top="0%" BackColor="#CCCCCC" BorderColor="#999999" BorderStyle="Solid" BorderWidth="3px" CellPadding="4" CellSpacing="2" ForeColor="Black" Height="199px" AutoGenerateSelectButton="True" OnSelectedIndexChanged="GWCase_SelectedIndexChanged"&gt;
  
      &lt;FooterStyle BackColor="#CCCCCC" /&gt;
      &lt;HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" /&gt;
      &lt;PagerStyle BackColor="#CCCCCC" ForeColor="Black" HorizontalAlign="Left" /&gt;
      &lt;RowStyle BackColor="White" /&gt;
      &lt;SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" /&gt;
      &lt;SortedAscendingCellStyle BackColor="#F1F1F1" /&gt;
      &lt;SortedAscendingHeaderStyle BackColor="#808080" /&gt;
      &lt;SortedDescendingCellStyle BackColor="#CAC9C9" /&gt;
      &lt;SortedDescendingHeaderStyle BackColor="#383838" /&gt;
  &lt;/asp:GridView&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>Css code : </p>
  
  <pre><code>#assigngw {
  width:100%;
  }
  </code></pre>
  
  <p>Unfortunately both does not work.</p>
  
  <p>Here is my entire source code. </p>
  
  <pre><code>&lt;asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"&gt;
  
  &lt;link rel="stylesheet" href="css/style.css" type="text/css" /&gt;
  &lt;asp:ScriptManager ID="ScriptManager1" runat="server"&gt;
  &lt;/asp:ScriptManager&gt;
  &lt;asp:UpdatePanel ID="UpdatePanel1" runat="server"&gt;
  &lt;ContentTemplate&gt;
  
  &lt;ul id="assigngw"&gt;
      &lt;asp:GridView ID="GWCase" runat="server" width="300px" Top="0%" BackColor="#CCCCCC" BorderColor="#999999" BorderStyle="Solid" BorderWidth="3px" CellPadding="4" CellSpacing="2" ForeColor="Black" Height="199px" AutoGenerateSelectButton="True" OnSelectedIndexChanged="GWCase_SelectedIndexChanged"&gt;
  
      &lt;FooterStyle BackColor="#CCCCCC" /&gt;
      &lt;HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" /&gt;
      &lt;PagerStyle BackColor="#CCCCCC" ForeColor="Black" HorizontalAlign="Left" /&gt;
      &lt;RowStyle BackColor="White" /&gt;
      &lt;SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" /&gt;
      &lt;SortedAscendingCellStyle BackColor="#F1F1F1" /&gt;
      &lt;SortedAscendingHeaderStyle BackColor="#808080" /&gt;
      &lt;SortedDescendingCellStyle BackColor="#CAC9C9" /&gt;
      &lt;SortedDescendingHeaderStyle BackColor="#383838" /&gt;
  &lt;/asp:GridView&gt;
      &lt;/ul&gt;
  
  
  &lt;br /&gt;
  Case ID :
  &lt;asp:Label ID="lblCID" runat="server"&gt;&lt;/asp:Label&gt;
  &amp;nbsp;is situation near
  &lt;asp:DropDownList ID="lblocation" runat="server" OnSelectedIndexChanged="lblocation_SelectedIndexChanged" AutoPostBack="True" DataTextField="location" DataValueField="location"&gt;
      &lt;asp:ListItem&gt;Select Location&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Bukit Batok NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Bukit Panjang NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Choa Chu Kang NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Jurong West NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Nanyang NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Woodlands East NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Woodlands West NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Ang Mo Kio North NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Ang Mo Kio South NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Punggol NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Hougang NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Sembawang NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Serangoon NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Sengkang NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Yishun North NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Yishun South NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Bedok North NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Bedok South NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Changi NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Geylang NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Marine Parade NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Pasir Ris NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Tampines NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Bukit Merah West NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Clementi NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Queenstown NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Jurong East NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Bishan NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Bukit Timah NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Kampung Java NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Orchard NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Toa Payoh NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Bukit Merah East NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Rochor NPC&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Marina Bay NPC&lt;/asp:ListItem&gt;
  &lt;/asp:DropDownList&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  The following case will be assigned to this selected officer&amp;nbsp;
      &lt;asp:DropDownList ID="DDLpolice" runat="server" DataTextField="dropdownpolice" DataValueField="dropdownpolice" OnSelectedIndexChanged ="DDLpolice_SelectedIndexChanged1" style="height: 22px"
      AppendDataBoundItems="true" AutoPostBack="True"&gt;
  &lt;asp:ListItem Value="-1"&gt;Select Officer&lt;/asp:ListItem&gt;
      &lt;/asp:DropDownList&gt;
  </code></pre>
  
  <p>&nbsp;<br />
      
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      
          <br />
          <br />
          
          </p>
  
  <p>
          </p>
  
  <p> </p>