betabug... Sascha Welter

home english | home deutsch | Site Map | Sascha | Kontakt | Pro | Weblog | Wiki

18 September 2006

Lining Up Form Elements and Labels with CSS

No tables, no floats!

Most forms have labeled fields in a simple pattern, each form element has a label next to it, usually on the same visual line to the left. Form elements should align horizontally on the same line. There are a couple of ways to do this...


  1. With a table, rows for each item of the form, one cell for the label, one for the form element.
  2. Some people use floats to "float" the label to the left of the form element.
  3. It's possible to do it without floats or tables, by using the principle that an absolute positioned element is positioned in relation to its parent element.

Even though we all despise the use of tables for layout purposes, tables still have a valid reason to exist: for tabular data. Forms and form labels are either very close to that, or (if for example we have another explanation column in the mix) they are right in there. I would argue that we could use a table for this purpose without guilt and we definitely should use a table, once extra columns come into play.

I have my own little fight against the abuse of floats in making page layouts with CSS. I believe that the abuse of floats for layout purposes is coming close to what we did with tables a few years ago. Floats were made to float text around images, not to make columns of text go side by side.

The way I have lately been solving the problem of "hanging indents" is to give the form element and its label an outer box (e.g. a div). Then we give the form element a margin-left and use absolute positioning for the label itself. The "content" is pushed to the right, the "label" takes position in relation to the outer box. With some elements for the content (e.g. a <p>), we have to make adjustments to get rid of an eventual margin-top.

Here is an example of how it's done.

CSS is commented and included in the HTML source. The HTML itself is not properly done, form elements and labels miss necessary attributes, but you'll likely get the drift. The use of "label" in the last line together with a paragraph is likely plain wrong, a p, div, or span with a class should better take it's place.

Posted by betabug at 16:22 | Comments (1) | Trackbacks (0)
ch athens
Life in Athens (Greece) for a foreigner from the other side of the mountains. And with an interest in digital life and the feeling of change in a big city. Multilingual English - German - Greek.
Main blog page
Recent Entries
Best of
Some of the most sought after posts, judging from access logs and search engine queries.

Apple & Macintosh:
Security & Privacy:
Misc technical:
Athens for tourists and visitors:
Life in general:
<< First September Rain | Main | Wednesday Jazz at the Stoa >>
Comments
Re: Lining Up Form Elements and Labels with CSS

Thanks for this - my forms are driving me mad in trying to do a simple job!

This has really helped

Posted by: olly at October 06,2008 18:17
Trackbacks
You can trackback to: http://betabug.ch/blogs/ch-athens/446/tbping
There are no trackbacks.
Leave a comment