# OT CSS styling for form field lables:

**URL:** <https://www.ruby-forum.com/t/ot-css-styling-for-form-field-lables/133473>\
**Category:** Rails\
**Created:** [March 31, 2008, 10:53pm UTC](https://www.ruby-forum.com/t/ot-css-styling-for-form-field-lables/133473 "2008-03-31T22:53:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![byrnejb](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/b/d2c977/32.png) [@byrnejb](https://www.ruby-forum.com/u/byrnejb)\
**Post date:** [March 31, 2008, 10:53pm UTC](https://www.ruby-forum.com/t/ot-css-styling-for-form-field-lables/133473/1 "2008-03-31T22:53:00Z")

</div>

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

\<% =  
  
Full Legal Name:

```
<input id="entity_entity_legal_name"
       name="entity[entity_legal_name]"
       size="80" type="text" />

```

-%\>  
-%\>

I want to see this on the form:

Full Legal Name:  
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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:  
Field1XX Field2XXXXXXXX Field3XXXXXXXXX

and block elements will kill that idea.

---

<div class="post-metadata">

**Author:** ![byrnejb](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/b/d2c977/32.png) [@byrnejb](https://www.ruby-forum.com/u/byrnejb)\
**Post date:** [March 31, 2008, 11:40pm UTC](https://www.ruby-forum.com/t/ot-css-styling-for-form-field-lables/133473/2 "2008-03-31T23:40:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![byrnejb](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/b/d2c977/32.png) [@byrnejb](https://www.ruby-forum.com/u/byrnejb)\
**Post date:** [March 31, 2008, 11:38pm UTC](https://www.ruby-forum.com/t/ot-css-styling-for-form-field-lables/133473/3 "2008-03-31T23:38:51Z")

</div>

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

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  
of  
the fields throughout an application.

Now just make it happen. You don’t actually do anything with the  
label…  
instead you do it to the form elements. Use the display:block; css  
property  
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;  
clear:both;}

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

Hope that helps!

-bph

---

<div class="post-metadata">

**Author:** ![byrnejb](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/b/d2c977/32.png) [@byrnejb](https://www.ruby-forum.com/u/byrnejb)\
**Post date:** [March 31, 2008, 11:44pm UTC](https://www.ruby-forum.com/t/ot-css-styling-for-form-field-lables/133473/4 "2008-03-31T23:44:10Z")

</div>

Yeah, OT, but

On Mon, Mar 31, 2008 at 2:37 PM, Brian H. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) 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=

Regardless,

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:

## HTH,

Hassan S. ------------------------ removed\_email\_address@domain.invalid