I’ve seen many a source code that is neat and XHTML-compliant everywhere except—for some mysterious reason—forms. There is some unspoken rule that tables are the only way to align form fields into two even columns. That rule is wrong. Without further ado, here is how to rid your pages of the final vestiges of layout tables (tested in Firefox 3 and IE6, the best and worst of all possible worlds):
HTML:
<div class=”field_container”><label>First Name</label><input type=”text”></div>
<div class=”field_container”><label>Last Name</label><input type=”text”></div>
CSS:
label {
width:150px; /*Or however much space you need for the form’s labels*/
float:left;
}
I’m serious, that’s it. So if I see another table, YOU’RE FIRED. 
10 Comments
No, no, no, NO! WRONG! BZZZZT!
You have hard-coded a maximum width. What happens when somebody changes the label names, or translates them into a language that is more verbose than English, or resizes their fonts? Using em widths instead of pixels is better, but still not good enough.
As punishment, you have to keep working on OsCommerce! Oh, wait—that’s the unpleasant cash cow you talked about in a previous post.
We’ve been using a similar technique with width set using percentages (so with 3 columns around 33%), YMMV.
How would you implement something like this?
http://drop.io/xtmb7ws/asset/screen
I had some ideas but they turned out to be too complicated so I just used tables, shame on me.
The problem is that the right-hand content has dynamic height and there can be misc other content between some rows (also with no pre-defined height).
One could float two divs per row but getting the heights to match without using javascript was beyond me.
Jim, you have a good point. I guess I’m going to use percentages like Erkki suggested. Meanwhile, I’ve been foiled again.
When to use tables for layout
http://olav.dk/articles/tables.html
the Label element should have a for attribute!!! else it’s not accessible.
i did this…
making it float, it will adapt for the longest text… the css is not seperate, but just a quick sollution :
Navn og efternavn:*
Evt. firmanavn:
Adresse:*
Postnummer:*
By:*
E-Mail:*
Telefon/mobil:*
Land:
Bemærkning/Hvordan fandt du os?
<input type=”text” value=”" name=”ContactName” />
<input type=”text” value=”" name=”CompanyName” />
<input type=”text” value=”" name=”Address” />
<input type=”text” value=”" onBlur=”findBy();” id=”ZipCode” name=”ZipCode” style=”width:80px;” />
<input type=”text” value=”" name=”City” id=”City” />
<input type=”text” value=”" name=”Email” />
<input type=”text” value=”" name=”Phone” style=”width:80px; margin-left:0px; padding-left:0px;” />
Danmark
Norge
Sverige
Hmmm was not able to post the content…
have a look at http://www.superstar.dk/delivery.asp
Thanks mariya for this useful technique, and yes as Erkki suggested use percentage.
Jim, you have control over your forms and CSS whether multilingual or not. They are not changing everyday, and you can actually make the text aligned right for that.
so you can have this in your CSS,
label {
width:30%;
float:left;
text-align:right;
}
Good-bye tables
Thanks again mariya.
very nice am fired tho’
Thank you so much, that was very helpful! I had tried several things and only frustrated myself more each time.
Quick.
Easy.
Pretty.
I like it.