Forms and CSS - lining stuff up

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

S - 27 Oct 2005 18:24 GMT

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/fishbowlsun/adextranet/pagetemplate/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

Reply to this Message

kchayka - 27 Oct 2005 19:04 GMT

> 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.

Signature

Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

Reply to this Message

Alan J. Flavell - 28 Oct 2005 10:38 GMT

> > 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/interact/forms.html#h-17.9.1)

regards

Reply to this Message

Johannes Koch - 28 Oct 2005 10:45 GMT

> 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.

Signature

Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Reply to this Message

kchayka - 28 Oct 2005 19:49 GMT

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

Well then, use the explicit variant! :)

IE doesn't support the implicit variety, anyway, at least not without
including an explicit "for".

> So it's a compromise.

I don't see it as such, though it is nice to have a choice. Use whatever
variant works best for your particular case.

Signature

Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

Reply to this Message

Gus Richter - 28 Oct 2005 09:07 GMT

> Hello
>
[quoted text clipped - 15 lines]
>
> ---------------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>

Signature

Gus

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / October 2005

Forms and CSS - lining stuff up