Question

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%;
}

There are DIVs within the calendar that are being forced to 49%. How can I have the calendar ignore the previous settings and use the styles that come with the calendar? Is that possible? I am afraid to change the current rule, but I think it probably needs to be, however many other divs on this control rely on it. What does the > symbol do to a css rule. For example

div#paymentRegion > div
{
    float:left;
    width:49%;
}

Maybe that will help? I am open for any suggestions.
Thanks,
~ck in San Diego

Answer 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#paymentRegion div {
    float: left;
    width: 49%;
}

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

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