How to rid of empty div that contains a GridView

Question

In ASP.NET Gridviews generate a table which generates a parent div container. This can break CSS layouts since there is no way to attach styles to the generated div. Is there a way to prevent the div from generating or a way to apply a style to it?

This was asked and marked as resolved here but MS just said that the div is needed for the Paging and Sorting functionality. Am I to understand that if I want to use the paging and sorting functionality I can't wrap my own div around it and apply a style? Thanks

Answer 1

Simplest and best solution using CSS class "gridViewWrapperFix".

ASPX:

<div class="gridViewWrapperFix">

    <asp:GridView>
    <%--the full gridview would go here--%>
    </asp:GridView>

</div>

CSS:

/* styles the div that gets auto generated around and asp.net gridview */

.gridViewWrapperFix > div { 
    padding: 0; 
    margin: 0; 
    border: 3px solid red;
}

Answer 2

If you're stuck with an unstyled wrapper (which it appears that you are) but want to enforce a style, give it another wrapper, and apply your style to the combination. If a plain div has some padding you want to get rid of (for example), this in the aspx:

<div id="crushGvDiv">
 <asp:GridView ... >
</div>

and this for CSS:

div#crushGvDiv, div#crushGvDiv div { padding: 0; margin: 0; }