CSS Aligning a form

Question

I am having some serious issues vertically aligning a form. I have to use this form, it was given to me by the company I work for. I am new to CSS and can't seem to get this to align appropriately. If you look at the website you will instantly see what I am talking about, with the form by the graphic that says "Check Availability"
http://www.colonybeachresort.com/re-design/
If anyone can help, that would be great! I've attached the css used too.

Answer 1

nowherecreative wrote:
My specific question is ... what is the best way to go about vertically aligning a form within a div? I need each form element to line up with the "check availability" text. At one point I did have IDs assigned to the form elements, but then I was told from someone not to do that. I will try it again and see if I can somehow get it working. Thank you for your help
Probably best to use a simple table as you can align vertically in a table cell whereas a css/<div> combination can't do that. Well I say can'tdo it - you can get away with one line of simple text in a <div> using line-height; but you have form elements and images.
You can try and shift elements into position by giving them a padding or margin or a combination of both. However in my expience forms are a bugger to line up correctly using css.
For starters you can zero out the default margin on the form tag
form {
margin: 0;
padding: 0;
Then push it down a bit to line up with the 'check availability' background image by adding some top padding:
form {
margin: 0;
padding: 10px 0 0 0;
You could then try and push the two image 'calendar' and 'submit' down as well;
form img {
padding-top: 10px;
However I found that this shifted the form fields down as well, at which point I gave up lol
I would have at that stage used a simple table and put each element (including 'check availability' in its own cell and set the vertical align to middle.