There's a good discussion going on over at Web Graphics challenging web designers to format their forms with CSS as opposed to tables. I've actually been meaning to write about this subject on this site and the discussion over there is a good catalyst.

At silverorange, we've been moving toward table-free layouts over the past year. Some sites we've done recently have been almost entirely CSS designed and some others have been hybrid layouts. However, forms is one area where we are still using tables every time. Why? Because even if they aren't semantically correct, tables work extremely well for laying out form inputs and field titles.

The few examples of CSS designed forms I've seen use fixed widths to determine the alignment of the field titles to the inputs. That works fine except when anyone resizes their fonts and you must also specify a precise width for each form you design as the title lengths are all different. Is there a way to specify the width of a <div> as a variable value? I don't care precisely how wide my <div> is, I just want all of my field title <div>s on one page to be the same width. For example, <div style="width: n;">. Has this been discussed as part of the CSS3 specification? Or maybe people have better suggestions...