Css Help - How Can A Div Ignore Css Previously Set On The Page?

I am using AjaxControlToolkit CalendarExtender. Some previous rule in my stylesheet is affecting div's within the calendar. div#paymentRegion div { float:left; width:49%;

Solution 1:

Theoretically, the > symbol would select only divs that are immediate children of #paymentRegion. A div nested farther down would be unaffected. However, not all browsers interpret that correctly, so it's not something you can reliably use.

A more direct solution is to wrap your calendar in a <div id="calendar"> and then write an overriding rule:

div#paymentRegiondiv {
    float: left;
    width: 49%;
}

div#calendardiv {
    float: none;
    width: auto;
}

Now even though mostdivs inside #paymentRegion will be floated, the divs inside #calendar won't be!

Solution 2:

VoteyDisciple is right, since his proposed solution's rule has a higher specificity than your current one.

More information on calculating specificity rules.

Solution 3:

It's difficult to know what to suggest without any HTML. Can you tell us the basic structure? For example, is the div that is targeted in the first rule a direct child of #paymentRegion?

If it is the highest level div (not necessarily a direct child), and all other divs are below that one, you can try this:

div#paymentRegiondiv {
    float: left;
    width: 49%;
}

div#paymentRegiondivdiv {
    float: none;
    width: auto;
}

However, the best bet would be to set a class/ID on that mysery div, if you can change your HTML.

div#paymentRegiondiv#uniqueID {
    float: left;
    width: 49%;
}