Forms and CSS - lining stuff up

Hello

Is there a recommended way to line up form fields with their labels so
that the label column is right justified and the fields are left justified?

Example:

http://www.dorseygraphics.com/review...getemplate/for
m.jpg

I need the labels to sit next to their respective fields and buttons, but
they need to be right justified. I'm not quite sure how to line this up
using CSS.

Any suggestions are appreciated.

Thanks,

---------------S

S wrote:

Hello

Is there a recommended way to line up form fields with their labels so
that the label column is right justified and the fields are left justified?

Example:

http://www.dorseygraphics.com/review...getemplate/for
m.jpg

I need the labels to sit next to their respective fields and buttons, but
they need to be right justified. I'm not quite sure how to line this up
using CSS.

Any suggestions are appreciated.

Thanks,

---------------S

This should get you started:

..sectionwrapper { /* position as needed, etc. */ }
..wrapper { margin-bottom:-12px; }
/* to change the value for white space between lines to your preference */
..leftcell { width:100px; text-align:right; }
..rightcell { position:relative;left:2em;top:-1.2em; } /* positions the
fields */
/* named them leftcell and rightcell to visualyze as tables */
/* values should be changed to your needs - if needed at all - just try
it */


<div class="sectionwrapper">
<div class="wrapper">
<div class="leftcell">Name:</div>
<div class="rightcell"><input size="25" name="namequest"></div>

</div>
<div class="wrapper">
<div class="leftcell">Description:</div>
<div class="rightcell"><input size="25" name="descquest"></div>
</div>
/* .....etc........ */
</div>

--
Gus

On Thu, 27 Oct 2005, kchayka wrote:

S wrote:

Is there a recommended way to line up form fields with their
labels so that the label column is right justified and the fields
are left justified?

Forms are considered by many to be tabular data. Use a table.

It's a defensible option, for sure. But putting the label text and
the form control into different table cells prevents the use of the
implicit association variant of the <label> markup. So it's a
compromise.

In fact, the HTML spec picks up this point in so many words, when
describing the implicit association:

Note that this technique cannot be used when a table is being used
for layout, with the label in one cell and its associated control
in another cell.

(from http://www.w3.org/TR/html401/interac....html#h-17.9.1)

regards

Alan J. Flavell wrote:

But putting the label text and
the form control into different table cells prevents the use of the
implicit association variant of the <label> markup.

Which IMHO is a strange thing. A text within a p element is part of the
paragraph, a text within a h1 is part of the headline, a text within a
caption is part of the caption, a form control within a label is part of
the label ... ooops.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)