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, but small fields and text resizing still give problems. 

#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.

However, IE does not like floating and clearing at the same time. 

#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.

Full example 

<hr/>#floatingFull {width:20em}
#floatingFull label {clear:left;float:left;width:8em;}
#floatingFull select,
#floatingFull input {float:left;margin-bottom:1em;}
#floatingFull select,
#floatingFull input.checkbox,
#floatingFull input.button {margin-right:5em}
#floatingFull .required {float:left;margin-left:1em;margin-bottom:1em;}
Extra margin is needed for checkbox and button because they are not wide enough by themselves.
* * *

All Solved! Thanks to margin-shuffling

In this version the form without margins would show form elements below their labels, because they are set to display:block.

However, by positioning them back next to their labels the space between labels is collapsing, giving the illusion of a table like form. 

      <hr/>
#floatingShuffle {width:20em;}
#floatingShuffle label {clear:left;float:left;display:inline;width:10em;line-height:2em;}
#floatingShuffle input,
#floatingShuffle select {float:left;display:inline;margin-left:11em;margin-top:-2em;}
#floatingShuffle .required {float:right;clear:none;margin-top:-1.5em}
The previous version could not handle small fields and text resizing very well. This one does.
* * *

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