Lining Up Baselines of Form Inputs in CSS

I was asked to line up all our baselines for any browser, with all our javascript created drop downs and form input boxes and so forth. Amazingly enough, default html behavior doesn't line up the baseline of text with form inputs. To see what I'm talking about, here's a visual example:

I started by using various solutions with padding and positioning and found that no matter what I did, irregularities occurred between stacked rows of items. It was only after trying to find good solutions for Firefox that I obtained a crucial piece of information. The float attribute makes things behave in a predictable way, even on IE6. Granted you may not like what it ends up doing, unless you take proper precautions, but it is the key to lining up baselines. once you've tweaked the styles and tested them thoroughly you can easily apply them all over your application and get something that instead looks like this:

The following is the code behind this solution:

.formLabelComboLeft        { white-space:nowrap; font-family: arial; font-size: 11px; text-align:right; width:90px; position:relative;top:2px!important;top:4px;float:left;padding:0px 0px 3px 0px!important;padding:0px 0px 2px 0px;}/*will line up with formValueComboLeft*/

.formValueComboLeft        { font-family: arial; font-size: 11px; height:18px!important;height:23px; overflow:visible!important;overflow:hidden; position:relative;top:1px!important;top:0px; float:left; padding:0px 0px 2px 5px!important;padding:0px 0px 0px 5px; margin:0px;}/*will line up with formLabelComboLeft*/

.formLabelInput          { white-space:nowrap; font-family: arial; font-size: 11px; text-align:right; width:90px;float:left; padding:0px 0px 2px 0px!important;padding:0px 0px 2px 0px; position:relative;top:3px!important;}/*will line up with formInput*/

.formInput          { font-family: arial;  font-size: 11px;white-space:nowrap; padding:0px 0px 2px 5px!important;padding:0px 0px 3px 5px;float:left}/*will line up with comboselect/formValueComboLeft and formLableInput */

.rowProper {clear:both;}

INPUT {font-size:11px; font-family:arial;}

And your html could look like:

<-span class="formLableInput">Name<-span class="formInput"-><-input property="member.name" -/><-/span-><-/div- - ->

Name

and you'd have a nice label with an input that lined up.

or you could get fancy with a table like the above (for code click here): Form Input with Table Example