Why tableless forms are difficult

The big problem is that as soon as you drop the table, you need to find some other way of aligning the labels and the inputs neatly in a table-like manner. When you use floats (which are in fact not even supposed to be used for this effect) a side effect is that if the elements (label and form fields) are not equal in width and height they tend to 'wrap', a natural effect of floating elements. There are other solutions, but all come with their own caveats and problems. The floating is usually considered the "best". Recently I found out that if I give the label a little bit of padding, or an invisible border (color same as background) that the inputs are suddenly aligned correctly in both IE and FF.

Try resizing the font size in your browser and see what happens

Problematic: float 

 #floating {width:20em}
 #floating label {float:left;width:8em;margin-bottom:1em;}
 #floating input {float:left;}
No extra markup, simple css, all floats

Solved but browser dependent: inline block 

 #inlineBlock {width:20em}
 #inlineBlock label {display:-moz-inline-box;_display:inline-block;
  width:6em;margin-bottom:1em;vertical-align:middle}
 #inlineBlock input {display:inline;}
The input needs to get display:inline or it won't work. Works in IE and FF, not in Opera.

Solved but only for fixed width sites: absolute positioning 

 #absolute {width:20em; position:relative;}
 #absolute label {display:block;width:10em;margin-bottom:1em;}
 #absolute input {position:absolute;left:12em;margin-top:-1.5em;}
Input margin need to be shifted because the label is pushing the inputs down

Solved! And still floating 

 #floatingFixed {width:20em}
 #floatingFixed     label {float:left;width:10em;padding:1px;margin-bottom:1em;}
 #floatingFixed     input {float:left; width:8em;}
I think this effect works because it prevents margin-collapse it makes label+label > form.

Update: clearing and floating labels

Courtesy of Ingo Chao, who gave an excellent explanation. 
 #floatingCleared {width:20em}
 #floatingCleared label {clear:left;float:left;width:8em;}
 #floatingCleared input {float:left;margin-bottom:1em;}
I moved the margin-bottom from the label to the input.

All solutions are tested in IE 6.0, FF 1.5 and Opera 8.5