Because of the multiple classes, tags, and ability to add extra classes or attributes to fields and their wrappers almost any layout issue, including yours, is solvable, and should be, in pure CSS. If you ever find yourself using modern HTML for layout instead of semantics--i.e., <p></p> represents a paragraph of text which happens to map to a block on the screen but all that matters is it conceptually a piece of text separate from the surrounding text--you are making a mistake.

I'm not saying it's always easy, and IE v the World makes it much harder still, but it is the right way to do it. Content in tags, layout in CSS.

Have you seen http://cpansearch.perl.org/src/CFRANKS/HTML-FormFu-0.05001/examples/vertically-aligned-css/?

Okay, thanks. That vertically-aligned example did the trick! Now I know how to proceed.

It appears the answer is "No, you cannot eliminate that Div tag added to every Element (or element pair, such as Input/Label)".

Instead, you must add extra grouping tags (Div, span, whatever) where you CAN control the class name with attributes, outside (surrounding) those elements. Then it is just a matter of targeting your CSS to those selectors.

Thanks for the quick replies, and the solution!

I took your advice and re-thought the way I was using CSS on my forms. I guess I needed a kick in the butt to do it right (something I know from the textbooks, but was falling short in my actual implementation).

Today I re-wrote my HTML::FormFu, and added some surrounding Blocks (tag: div) around my elements, corrected my CSS to target the selectors more precisely, and I now have the kind of form I wanted, where the long text inputs (Name and Address) are stacked vertically, and the shorter fields (City-State-Zip) are on one line (horizontally).

In every case, I have my label sitting on top, aligned to the left edge of the Input box. Neat!

Thanks again, Monks. You do a great service to the Perl community here.

Nice going. :) Don't forget you can add classes to your form pieces too and that's usually all you need; i.e., another wrapper tag (Block) is usually overkill. E.g., I add a date class to my date stuff so I can attach a jQuery date/calendar selector to it-

  - type: DateTime
    name: publish
    add_attributes:
      class: date
    label: Publish Date
    auto_inflate: Yes
[download]

Update: Looking at your YAML again, I think you already knew this... :)

Yes, I wholeheartedly agree that presentation (CSS) should be separate from the semantic HTML.

The problem I am having is getting rid of ... or at least modifying ... that Div tag that surrounds every Input element that is generated by FormFu. The class of that Div tag is always equal to the Input type. How do I modify or elminate it?

I am more than happy to surround my Input elements with my own Div tags, using FormFu blocks, which I have done successfully in the example I gave. I have also written the CSS for those tags (which I did not include in my example).

Is this possible (altering the default Element Div class, or eliminating the Div wrapper)? Or are you saying the Div wrapper around every element is a good thing, and I should just work harder on my CSS?