tags:

views:

68

answers:

3

There are a lot of questions about formatting forms so that labels align, and almost all the answers which suggest a pure CSS solution (as opposed to using a table) provide a fixed width to the label element.

But isn't this mixing content and presentation? In order to choose the right width you basically have to see how big your longest label is and try a pixel width value until "it fits". This means that if you change your labels you also have to change your CSS.

+2  A: 

Your labels can still word-wrap, thus allowing them to be very short or very long. You're not limiting your content in any way at all (almost), you're just dictating how they will be displayed.

Jaxidian
Come on, word wrap means they will look like crap.
kemp
Oh, so you want your content to dictate your presentation? Is that what you're saying? That's what that comment sounds like... ;-)
Jaxidian
+3  A: 

I have no problem (Gasp! Heresy!) with using tables to line up form elements and their labels. If that makes me a Luddite, then so be it. I feel it can be argued that arrays of label/input pairs are sufficiently tabular to be rendered with tables.

Robusto
+1 for the guts to be a Luddite, and also for rejecting dogma in favor of simplicity and supporting very old or oddball browsers.
David Stratton
What about using `form > fieldset > div` instead of `table > tr > td`, but giving the former elements `display: table / table-row / table-cell` styles to make them behave as table. (Haven't tested but I'm pretty sure not all browsers like this approach. And no, I'm not seriously proposing this.)
jholster
@Yaggo: Bad things happen when you cause other elements to display as table elements. I mean, if you're going to use table display rules, why not just use tables? For me it's about doing things that work the way they're supposed to and don't cause me extra dev time and headaches.
Robusto
@Robusto, I fully agree with you.
jholster
A: 

Fixed widths don’t have to be in pixels. em is a valid and better unit for containers with text.

toscho