ASp.Net Gridview wider then parent DIV

Question

The problem page: http:// www . webeerlieve . com/ShowThread.aspx?ID=521

If you put your browser into 1024x768, you will see the GridView table will extend past the div "postbody". I don't know how to stop this from happening.

Answer 1

Because of the nature of a table, there is a minimum width is cannot drop below and that width is determined by the width of the items within each table row. I am assuming you have already specified a width to the GridView control and it is still overflowing because the data is too large. You can try adding the GridView into another div and specifying css properties to that div to control overflow, like this:

<div style="overflow: scroll; width: 800px; Height: 300px;">
   <asp:GridView id="GridView1" runat="server"  />
</div>

Now, if your GridView exceeds the dimensions of the containing div, the div will remain static in size and any overflow will prompt scrollbars to appear.

Answer 2

Remove any fixed width from the div itself, and instead apply margins to the div and padding to the datagrid through CSS.

This should allow the datagrid to always be contained inside the div with the same amount of white space no matter what the size of the datagrid happens to be.