This page describes the steps needed to create right aligned text for an HTML form. A sample page that uses this technique follows.
Here is the CSS rules and HTML for this example. A description of some of the key features follows.
RightAlignedForm.html
The Outer Box
Line 7 defines the rule for #centeredBox. This creates the box surrounding the form. A border is defined. The box is centered by setting the left and right margins to auto. A little padding is added for good measure. A width is set keep the white space around the form elements reasonable.
Form Elements
The key rules on are line 9 and 10. Line 10 makes the text float. A width is set to 150 pixels and the text is then right-aligned. This makes all our form labels line up with the text boxes.
Line 9 merely resets the float. Since each form element is in a formItem div tag, this has the effect of inserting a line break without using a <br> tag.