CSS is not applying to div with Gridview

Question

I want to have a div with my Gridview in it but the CSS for my div is not working. Here is the code:

<div class="grid">
<asp:GridView ID="GridView1" runat="server" CssClass="grid" CellPadding="1">
</asp:GridView>
</div>

And my CSS is like:

.grid{

float:right;
border:solid;
margin: 2px;
width:400px;
} 

And the generated HTML :

<div class="grid">
<div>
<asp:GridView ID="GridView1" runat="server" CssClass="grid" CellPadding="1">
</asp:GridView>
</div>
</div>

Even The border is not displayed.I don't know where that other div comes from but when I apply the style on the second div in Firebug it works.

Answer 1

HI now used to border property as like this

.grid{
border:solid 2px red;
} 

or you can try to this way

.grid{
border-style: solid;
}

The border CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. border can be used to set the values for one or more of: border-width, border-style, border-color.

More about click here

Border style here

Answer 2

Just correct your css like

CSS

.grid { 
 float:right;
 border: 2px solid green;
 margin: 2px;
 width:400px;
}

Answer 3

As you are using ASP, you'll have to use a special syntax to apply the css.

BorderWidth="1px" BackColor="#000000" 

See https://msdn.microsoft.com/en-us/library/aa479342.aspx for more.

Answer 4

.grid{
overflow:hidden;
float:right;
border:solid;
margin: 2px;
width:400px;
} 

I have added overflow:hidden which I believe should solve your problem.