Aligning controls

A common requirement is to lay out controls so that labels and data entry areas line up neatly. Most authors assume that tables are needed to do this, but to keep with the spirit of both HTML and CSS, tables should not be used.

The easiest way to obtain a neat layout is to set the size of labels on a control. For example, if all labels were set to 12em then the data entry sections would line up:

xf\:input xf\:label
{
  vertical-align : middle;
  margin-right   : 0.2em;
  width          : 12em;
}

The dimensions of the entire control can also be set. In this example we set all input controls to take the full width of their container, and to have a dotted line at the bottom:

xf\:input,
{
  width            : 100%;
  padding-top      : 0.4em;
  padding-bottom   : 0.1em;
  border-bottom    : #d0c49d 1px dashed;
}

We can also set the data entry part of input controls using the technique for setting ::value. For example, to apply a light green background we would do this:

.input-value,
{
  background-color : lightgreen;
}

If all of these rules are combined (styling the full input control, the label and the ::value pseudo-element) we would get a layout like this:

If you're not clear on why this happens, you might want to revisit Anatomy of a control.