CSS table alternative

[Hammer65]

I am looking for advice on replacing a table layout (for form layout) with a CSS design. The purpose is to put together a PHP class that auto-generates forms so that the structure of the forms, is under control of an admin interface though an API. The problem is, that many of the clients that I do work for are very particular about the layout. In other words city, state and zip code must all be on one line, but phone number must have a row to itself, etc., etc.. The form must look exactly like the paper version.

Generating a good looking form through an API using a table layout where i have to worry about column spans and so forth, is not something I am looking forward to. I would like to use a CSS layout instead. What is the best way to coax divs to work in the same way table cells and rows do and still deal with any goofy IE CSS quirks?

[Xapti]

Well to exactly mimic tables, divs can be displayed as table-cells, but the support isn't there for IE6 or 7.

You then just have to use floats and clears as far as I'm aware.

[rocknbil]

Well, I have had pretty good success doing this, and some of the forms are quite complex. I create "form rows" by class that float to the left of a main container, pretty much . . . like a table.

Within those form rows, I have a div that is a "label column" that contains leftmost labels. I've experimented with both a percentage width and a fixed width, both seem to work okay. These are text-aligned right, but floated left- the leftmost column neatly lines up at a uniform width with the text snug against the first field. This is so the fields and content to the right don't need to be floated - with the exception of multiple fields on one row, as in your address/state/zip all on one line.

For these, I create another div that does float right to get some sort of perfect vertical alignment with other "rows" of right-floated fields/labels. When you go futzing around with this though, you'll need to pay mind to the tab order and begin using the tabindex attribute to set it right.

The one trick that seems to make all this work together is setting a pixel width on form fields. I usually get away creating three, sometimes four field classes: small-field, med-field, large-field, etc. These seem to override the difficulties you get from cross browser differences in the width attribute of form fields (or cols for textearea.) All your fields of the same class are now the same length, in both browsers, and align perfectly.

One of my earliest experiments can be seen here [webmasterworld.com].

But there are other, probably better solutions proposed here [webmasterworld.com] and here [webmasterworld.com]. Some of those, though, nest the field in the label. Something tells me that negates "semantics" which is . . . kinda the point. But if it works, it works.

There are gobs of these threads here, you'll settle on one that suits you.