I’ve spent an hour drilling down what’s causing this misalignment. If I take out the following section, all is good…meaning the entire content is centered as it should be.
<!-- Birthday -->
<div class="extraPadding-Top-10">
<div class="rewards-BirthDayWrapper">
<p class="rewards-BirthdayHeader">
<span class="bold_black_12">Celebrate your birthday all month long!</span>
Receive a special birthday coupon code to enjoy as often as you want during the entire month of your birthday!
</p>
<p><img src="images/rewardsprogram/birthdayCake.png" alt="Personalized Rewards Program - Update Your Birthday"/></p>
</div>
<p style="clear: both;">
<span>
<asp:CustomValidator ID="CustomValidator3" runat="server" ControlToValidate="ddlBirthMonth" Display="Dynamic" ClientValidationFunction="ValidateBirthMonth" EnableClientScript="true" ErrorMessage="Please sepecify your birth month" Text="*" ValidateEmptyText="true" />
<asp:Label ID="lblBirthMonth" runat="server" class="S11 LogoColor Bold" Text="Month:" />
<asp:DropDownList ID="ddlBirthMonth" OnChange="SetBirthDayByMonth();" runat="server" />
</span>
<span >
<asp:CustomValidator ID="CustomValidator5" runat="server" ClientValidationFunction="ValidateBirthDay" ControlToValidate="ddlBirthDay" Display="Dynamic" EnableClientScript="true" ErrorMessage="Please sepecify your birth day" OnServerValidate="ValidateBirthDay" Text="*" ValidateEmptyText="true" />
<label id="lblBirthDay" class="S11 LogoColor Bold">Day</label>
<asp:DropDownList ID="ddlBirthDay" runat="server" />
</span>
<span>
<label id="lblBirthYear" class="bold_black_12">Year</label>
<asp:DropDownList ID="ddlBirthYear" runat="server" />
<label id="yearHelpText" class="S10">(optional)</label>
</span>
</p>
</div>
Meaning if I take out specifically above the following, the problem goes away:
<p class="rewards-BirthdayHeader">
<span class="bold_black_12">Celebrate your birthday all month long!</span>
Receive a special birthday coupon code to enjoy as often as you want during the entire month of your birthday!
</p>
What do I mean?
Here it is with the text section still there:
And here is the page with that text taken out:
this style doesn’t make a difference. I can take it out and it’s not causing any of the effects you see
.rewards-BirthdayHeader
{
float: left;
width: 400px;
margin: 60px 20px 20px 0px;
}
So not sure why that particular section is causing my entire content to move left on me.
If you need more info than this let me know.