Aligning a <legend> to the right

<legend> aligning through CSS

[Zeldere]

Hello,

The content of a <legend> element can be aligned using its attribute "align". This attribute, however, is deprecated in XHTML, so I wonder how to do this using CSS. Using "text-align:right;" doesn't seem to work.

Thanks for your attention.

Best regards,
Zeldere.

[JAB Creations]

Here is what I tried (and failed) as my work is done in XHTML 1.1...

Attempted to use relative positioning and then set the value of right to 200px.

Attempted to use padding and margins.

Attempted to text-align fieldset.

It's a good challenge and I hope you figure it out! Sorry I could not be of any real help. :-\

[JAB Creations]

You could try this...

legend
{
background: #fb0;
border: #26a solid 1px;
padding: 1px 10px
}

[creativexperience]

Try this out. I use pure CSS layouts with XHTML.

legend{
width:200px;
padding:2px 0 0 5px;
border:1px solid #CCCCCC;
float:right;
text-align:right;
}

This is a snippet from one of my forms.

Hope its what you need.

[Span]

From a usability point of view, I think a form's legend should be at the left side of the form.

[JAB Creations]

They could be using it for one of those crazy backward forwards languages (though I doubt it). Still it's awlays good to know your options then not.

[SuzyUK]

Hi Zeldere and Welcome to WebmasterWorld!

Legend Element [w3.org]

The correct CSS substitute for the align attribute is float, so in this case you "should" float the legend element to the right, which then makes it into a block level element and allows you to give width to it as well.. (it's an inline element by default)

however, I note that this doesn't work too well in practice as it moves the legend out of vertical alignment in FF :( so this is probably something you still need to "work to the design" and whatever suits

Suzy