Why isn't this form centered?

Hello,

I created a form that needs to be centered horizontally on the page.  But I'm not getting it quite right.  It's flush left.

Here's a link to the demo page:  Link to page with form.

Here's the css I am using unsuccessfully:
div#FormCentering {
width: 1011px;

}

form#chronoform_contactus {
width: 300px;
margin-left: auto ;
margin-right: auto ;
}

Open in new window

Looking forward to your solution...

Rowby
LVL 9
Rowby GorenAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

OmniUnlimitedCommented:
Don't try and center the form.  Add text-align: center to div#FormCentering and enclose the form in a fixed width containing div with the left, right margins set to auto and that should do it.   You can set text-align: left on the containing div if you don't want the text in the text boxes centered.
Nikc-NackCommented:
I took a quick look at your site and it appears that your division is not getting the proper alignment. Look at your template.css file on line 286. That CSS file is getting priority over whatever CSS that you may be trying to include. In the CSS at that location the margin is being set to 0; which is causing the division not to be centered.
I usually do not try to style forms, I would personally recommend enclosing the form in a division and centering the division.

I believe that fixing the margins would solve the problem though. Let me know if that works out for you.

- Nikc
rbudjCommented:
A quick work around until you figure out the priority... Inline CSS takes priority so adding a width and a margin to the div will place it in the center. You do not want text-align. That is for text and images.

<div id="FormCentering" style="text-align: center; width:300px; margin:auto;">
center-form.jpg
Jagadishwor DulalSenior Web DeveloperCommented:
Yes the main problem is your form width it's very large that's why it's not centered. Just change your css to :

div#FormCentering {
    margin-left: auto;
    margin-right: auto;
    width: 300px;
}

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rowby GorenAuthor Commented:
Hi

All of your comments and solutions were helpful not only in this form, but centering divs specifically.   So I have split the points.

And now my "form" fields are centered.

Thanks everyone for your help and insights.

Rowby
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.