OT CSS styling for form field lables:

I want to have my form field and their associated labels stack
vertically without introducing xhtml inline or block elements. So, given

<% =

Full Legal Name:

<input id="entity_entity_legal_name"
       size="80" type="text" />


I want to see this on the form:

Full Legal Name:

Does anyone here know, or can provide a reference to, a css recipe that
will accomplish this? All the references that I can find introduce
block elements or accomplish vertical positioning of lables, but I want
to do things like this:

Label 1: Label 2: Lable3:

and block elements will kill that idea.

Noticed you’re trying to do some sort of table approach… Use spans to
encapsulate your pairs :slight_smile: Those are invisible and inline.

Well… first, discover if you have valid XHTML. A label tag does not
your form field. It sits next to it and the “for” attribute binds them

Last Name:

So, restructure your form:

Full Legal Name:

I give the form field an id to help scope the css so I don’t affect all
the fields throughout an application.

Now just make it happen. You don’t actually do anything with the
instead you do it to the form elements. Use the display:block; css
to make these block elements, and then the clear:both attribute to force
these fields to a new line.

#my_form input, #my_form select, #my_form textarea{display:block;

Get more granular by giving each form field a class or a unique ID.

Hope that helps!


Yeah, OT, but

On Mon, Mar 31, 2008 at 2:37 PM, Brian H. [email protected] wrote:

Well… first, discover if you have valid XHTML. A label tag does not wrap
your form field.

It doesn’t have to but it can. In which case you can drop the for=


Here’s an example (caveat: only tested in Firefox) that lets you have
label/input pairs side by side with no extraneous markup:

label.input_field { display: block; float: left; margin-right: 2em; } input { display: block; } demo Full Legal Name:

Full Legal Name:


Hassan S. ------------------------ [email protected]