Long labels ruin the flow for a form with right-aligned labels

Some of the labels for the fields in a form I'm putting together are two or even three lines long. This messes up the row below it - the label for the next row floats to the right of the label of the row above, rather than floating all the way to the left. This happens even though the li.gfield has a "clear: both" in the CSS,

(I'm not explaining this really well; if it's easier, take a look at http://www.aprinter4u.com/credit-application, at the third field under "COMPANY INFORMATION.")

I can change the width of the gfield_label to be higher, and I can decrease the width of the ginput_container.input, but even after all that, I've got one label which has a break. Also, I don't want the form to end up lopsided, with long labels and short form fields.

Does anyone know how to fix this? Thanks in advance!

This is as close as I could get by just messing around: http://grab.by/c4Lo

I mean, you have a few long labels, which is always going to look uneven no matter what you do when you have them side by side. Do you have an aversion for using the top label placement? What I did to get that above was use the left label option, then got rid of this style here:

[css]
.gform_fields li {
display: inline;
}

Then did (place in your theme's stylesheet):

[css]
.gform_wrapper .left_label .gfield_label {
width: 62% !important;
text-align: right;
}

Keep in mind that these are all-encompassing selectors, so you can get more specific by targeting the form ID in the selector. Hope this helps.

Awesome. Yeah, you can probably use a combination of our ready classes too to save on some space:

http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes

prmtr and Rob - I came up with another idea that really seems to do the trick as well. I put HTML fields right underneath the fields which would have really long titles, with a line break or two (depending how long the title is). This helped break things up and align the one below it, mostly. It doesn't work in IE9, though, so there may be more needed to really make it work.

EDIT: <div style="clear: both;">&nbsp;</div> seems to work better, but only after I adjusted the widths. Now the width of the labels added to the width of the fields are closer to 100%, so floated elements don't have enough room to float in the wrong places.