I develop a web application with a liquid/relative layout. I'm trying to find the optimal and most elegant way of displaying data entry forms in that context.
Here are my requirements:
The design must work on IE7, IE8, Firefox 3, Chrome and Safari 4.
The form shall be displayed as two columns. The field captions should be on the left column and the input controls should be on the right column.
The form should be aligned to the left side of the page; not centered.
When resizing the browser to a very wide width (maximized on a widescreen monitor), the form width shall not stretch in a way where captions and input controls would become unnecessarily wide. For instance, the caption column should never be wider than 200px. And the control input column should not be wider than 400px.
When resizing the browser to a very narrow width (300px). The form should not overflow over on the right side and should still be usable. In such an edge case, the layout of the form will not be pleasing but it will work.
It should not be necessary to specify the width of each individual input controls. Text fields should be as wide as possible (without exceeding the max size of the input control column). In some specific cases; specifying a max-width or min-width for an input control is acceptable.
I would like guidelines and advises on how to do that, such as:
Should I use a table to layout my form; with one row per caption/control pair? If not, how should I do that?
What are good strategies to make the form somewhat fluid but not the point where it would be excessive and unnecessary?
Do you have links to existing sites or to web designs (free or paid) layouts that support those requirements?
What is the best way of managing input control widths? It is reasonable to think that I will get good results without resorting to input controls with fixed widths?
I'm open to all ideas and suggestions. If you think some of the requirement are not reasonable or are not a good ideas, I'm open to comment on that too.
In general terms you need to use width: auto or width: 50%, max-width and min-width and float your labels and form controls in floated 100% wide fieldsets in a max, min, width: 100% form. Use a list perhaps to structure your label and input pairings
make the min-width of the form controls and labels and form the same and on narrow browsers at that width, form labels and form controls will stack.
It really is a big question, but the CSS wouldn't be complex and older versions of Internet Explorer can be persuaded to do min&max widths with this: http://www.doxdesk.com/software/js/minmax.html or similar.
This article might be of interest:
and the book it seems to have spawned: