XForms/Address Aligned

Using CSS to Align Form Fields
Forms are much easier to use if they are aligned. This example uses CSS table structures to align our form. It turns groups into tables, inputs into rows and labels and values into cells.

Link to XForms Application
Address Aligned

Discussion
This style sheet only covers the XForms  tags. It will need additions if you want to align select, select1, textarea and other controls. A full CSS file for doing this is described later on in this cookbook.

Note that you MUST put inputs inside of a group element for this stylesheet to work.

Also note that the table can grow if the labels get too long.

Note that the display: table properties work in FireFox but may not work in older browsers that do not support table layout.

Alternative layout strategy using float:left
You can control the width of the label column by the odd interaction of the float:left CSS control and the block display. Basically if you try to control the width of a block it may not work unless you also add the float:left to label.

Here is the CSS that works for this:

Note that some older browsers do not support the child (greater than) selector correctly.