Alignment within Forms Using Float and Width Properties

Alignment of forms has traditionally been done with tables with the prompts/labels in the first column and the form elements in the second column for text boxes. For radio buttons, checkboxes, and drop list lists, the form elements typically appear in the second column and the prompts/labels often go in the second column as well.

Forms can also be aligned with CSS as in the example below

The code is very simple

• one can define a class with a width and float:left property, and then apply it to the things you want to be in the first "column"
• do nothing with regard to the items to be in the right "column."
• For cases where you don't want anything in the first "column", you can simply apply the class to an empty paragraph.
• For material after the form, one can apply a clear:left so that the subsequent material starts at the left margin.

See the source code of this page for the details.

Revised: November 3, 2016