Text causing entire content to move left

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.

It wasn’t an insult at all, I just assumed it was common knowledge, no offense was meant in that :).

I hope the last comment was not an attempt to insult my intelligence :wink:

problem still there, it’s not the <td> that’s the issue… so I’m abandoning this for now.

And actually I have no tables in my code…the part where this problem is happening so not sure why you say it’s a table problem. Everything in that section is contained in a <td> but everything in that <td> are either <p> or <div>.

Thanks, I no longer use many tables (all tableless) so I forget that <td> tags can cause pain like this if you don’t have a width set in them. As far as removing them, I’d love to, but the boss still uses a crapload of tables.

<td>'s are table cells thus part of a table, I didn’t specifically look up in the markup to see tables…I just saw the <td>'s there and assumed.

I assume you also know that <td>'s are only valid when contained within a <tr>? And also only when it’s contained iwthin a <table> tag :slight_smile:

Table cells are generating the problem behavior.

If you didn’t know that <td>'s can’t be freely used, then I’d consider a validation and get all that sorted out (whatever else you missed )(the validator would be screaming) :slight_smile:

Hi, the pagei s correct while having that code block there because the <td> that you are wrapping it in is wide because the text is st retching all the way across. Nothing else on that page stretches from one end to the other. Table cells are shrink to fit

Since the text is removed, and nothing else is that wide, the <td> gets smaller in size, and thus screws up the alignment of hte page.

You really just need to remove the tables there and just setup regular <div>'s to layout hte page, that way you don’t have to always be worried. That’s the best solution :slight_smile:

Ok if you only feel safe giving out to private message, please have it to me no later then 9:00 Eastern time (I can help you then)

If it’s anytime after that (until 10 eastern) then you run the risk of me not doing it…until 5:30 or so when I get home from work :slight_smile:

Just giving you my work schedule for tomorrow lol :wink:

Hi, is there any chance we could get a live page where this is going on?

actually I can…I’ll send you a private link tomorrow.

Hi, is there any chance we could get a live page where this is going on? You only give us a snippet of HTML which doesn’t really help us out :slight_smile:

If there isn’t a live page, then please provide us with full HTML and CSS so we can recreate the problem (though we wouldn’t have images so the live link would be best ;))