Form Layout using Definition Lists

As you may well know, using a definition list (DL) to layout forms with labels and fields side-by-side could be a bit flaky at times; forms don’t seem to scale nicely and numerous layout problems could occur with dynamic content. Typical pitfalls are situations where a label or field takes up two or more lines or a BR tag in the DD column breaking things. After some playing around and testing I finally came to an elegant and bulletproof solution.

dl {clear:both;}
dt {float:left; clear:left;}
dd {overflow:hidden; clear:right; height:1%;}

The above CSS snippet will float the DT tag to the left. Then the DD tag will snug nicely to the right of it. The clever thing is if the content within the DD tag spans more than one line it will be indented by the width of the DT column. Try it!

However, our form looks a bit messy at the moment as the width of the DT column is determined by its content. Hence form fields and labels don’t align properly. To resolve this all we do is add a fixed width to the DT column.

dt {width:10em;}

Now, we’re faced with yet another problem. If the contents of the DT tag spans more than two lines it will occupy the space of the DT tag below it, pushing all the other DTs down causing misalignment of the DT – DD rows. To resolve this we add an additional empty DD tag for clearing, which we place below the actual DD containing content.

dd.x-form-clear {clear:both;}

To complete this post here’s an example form layout using definition lists.