Question

I am trying to align my floating labels with my floating input fields. Of course, I have been searching around but no available answers helped me out.

Find it here: jsfiddle

The problem is related to the font-size I am setting for the body-tag. Remove it and you’ll see that the label and input is vertically aligned.

How can I fix this (without removing the font-size style for body, my entire application is depending on this one)?

Answer 1

Since you’ve a list of fields I would wrap every pair of label + field inside a list-item and thus applying a basic clearing to <li> element like so

#addagentform li {
   height: auto; overflow: hidden;
}

you achieve the effect.
see fiddle: http://jsfiddle.net/AGV6G/6/