Using CSS for form layout (No more tables.. )

Form fields need to line up. OK. Historically this was achieved using a table, and masses of markup. Although that’s still acceptable and would not fail validation, there is an easier and better way that uses less code and where using the correct tags will also cause the ‘name’ field become focused when you clicked the ‘name’ label.

Using CSS we can achieve this using less code, while providing improved usability.

  • Use a <P> tag to distinguish each line.
  • Use a <label> with the name attribute to link to an input with the same name attribute to create the links.
  • Put the <label> inside the <P> tag with a fixed width, floated left
  • Use the padding (inside) and margin (outside) on the <P> tag for spacing.



p {
  padding: 2px;
  margin: 5px;
p.submit {
  margin-left: 110px; 
label {
  width: 100px;
  float: left;
  text-align: right;
  margin-right: 5px;
  display: block;

Leave a Reply