How to align text, images and form controls

Table of Contents

• 1.0 Introduction
• 2.0 Aligning text and images
  • 2.1 How to align text and images using embedded styles
  • 2.2 Examples of how to align text and images
• 3.0 Aligning form controls
  • 3.1 How to align form controls using embedded styles
  • 3.2 Examples of how to align form controls
    • 3.2.1 How to vertically align the label with the form control
    • 3.2.2 How to horizontally align form controls
      • 3.2.2.1 Text box (different lines)
      • 3.2.2.2 Text box (same line)
      • 3.2.2.3 Checkboxes and radio buttons
      • 3.2.2.4 Text area (different lines)
      • 3.2.2.5 Text area (same line)
      • 3.2.2.6 Select (different lines)
      • 3.2.2.7 Select (same line)
      • 3.2.2.8 Submit and reset buttons

1.0 Introduction

It is important to use embedded styles for alignment since the center element and the align attribute (except when used in td and th) are deprecated.

2.0 Aligning text and images

Text and images can be left, right or center aligned.

2.1 How to align text and images using embedded styles

The alignCenter, alignLeft and alignRight CSS classes have already been defined in the GC CLF 2.0 template. If you are not using the GC CLF 2.0 template, you will have to define the following CSS classes:

• .alignCenter{text-align: center;}
• .alignLeft{text-align: left;}
• .alignRight{text-align: right;}

Surround the text and/or images with one of the following:

• <p class="alignCenter"></p>
  (do not use between <form> and </form>)
• <div class="alignCenter"></div>
• <h1 class="alignCenter"></h1>
• <h2 class="alignCenter"></h2>
• <h3 class="alignCenter"></h3>
• <h4 class="alignCenter"></h4>
• <h5 class="alignCenter"></h5>
• <h6 class="alignCenter"></h6>

For left or right alignment, use alignLeft or alignRight instead of alignCenter.

Do not use <p> or </p> between <form> and </form> since there is a bug in Netscape 4.x that will cause the form engine to shut down.

2.2 Examples of how to align text and images

1. <p class="alignCenter">This text is centre aligned.</p>

   This text is centre aligned.

2. <div class="alignRight">This text is right aligned.</div>
   
   
   This text is right aligned.
   
   
3. <p class="alignCenter"><img src="images/wmms.gif" height="20" width="83" alt="Symbol of the Government of Canada" /></p>

   

4. <p class="alignRight"><img src="images/wmms.gif" height="20" width="83" alt="Symbol of the Government of Canada" /></p>

   

3.0 Aligning form controls

Aligning form controls is almost the same as aligning text and images, with the following exceptions:

• Form controls should only be aligned using the div element (the p element causes problems in Netscape 4.x).
• Labels associated with form controls must be left aligned when they are in a div that uses a style for alignment. This is required because of a bug in Netscape 6.0.

3.1 How to align form controls using embedded styles

Caution: Do not use <p> or </p> between <form> and </form> since there is a bug in Netscape 4.x that will cause the form engine to shut down.

3.2 Examples of how to align form controls

3.2.1 How to vertically align the label with the form control

To vertically align the label with the form control, use either the alignTop or alignBottom CSS class with the label. If the form control is being horizontally aligned as well, then use either the alignTopLeft or alignBottomLeft CSS class with the label.

The alignTop, alignBottom, alignTopLeft and alignBottomLeft CSS classes have already been defined in the GC CLF 2.0 template. If you are not using the GC CLF 2.0 template, you will need to define the following CSS classes:

• .alignTop{vertical-align: top;}
• .alignBottom{vertical-align: bottom;}
• .alignTopLeft{text-align: left; vertical-align: top;}
• .alignBottomLeft{text-align: left; vertical-align: bottom;}

Note: The alignTop and alignTopLeft CSS classes will vertically align the label with the top of the form control. The alignBottom and alignBottomLeft CSS classes will vertically align the label with the bottom (default) of the form control.

<div>
<label class="alignTopLeft" for="comments4">
<strong>Comments</strong></label>&nbsp;
<textarea name="comments4" id="comments4" rows="5" cols="30">
</textarea>
</div>

Comments 

3.2.2 How to horizontally align form controls

The alignCenter, alignLeft, alignRight, alignTopLeft and alignBottomLeft CSS classes have already been defined in the GC CLF 2.0 template. If you are not using the GC CLF 2.0 template, you will need to define the following CSS classes:

• .alignCenter{text-align: center;}
• .alignLeft{text-align: left;}
• .alignRight{text-align: right;}
• .alignTopLeft{text-align: left; vertical-align: top;}
• .alignBottomLeft{text-align: left; vertical-align: bottom;}

Surround the form controls with <div class="alignCenter"></div>.

For left or right alignment of any form control, use alignLeft or alignRight instead of alignCenter.

The associated label element must always use either the alignBottomLeft or the alignTopLeft CSS class as shown below:

<div class="alignCenter"><label class="alignTopLeft" for="email3"><strong>Email Address</strong></label>&nbsp;
<input name="email3" id="email3" size="30" maxlength="30" /></div>

Note: The alignTopLeft CSS class will vertically align the label with the top of the form control. The lignBottomLeft CSS class will vertically align the label with the bottom (default) of the form control.

3.2.2.1 Text box (different lines)

<div class="alignCenter"><label class="alignTopLeft" for="email">
<strong>Email Address</strong></label></div>
<div class="alignCenter"><input name="email" id="email" size="30" maxlength="30" /></div>

Email Address

3.2.2.2 Text box (same line)

<div class="alignCenter"><label class="alignTopLeft" for="email2"><strong>Email Address</strong></label>&nbsp;
<input name="email2" id="email2" size="30" maxlength="30" /></div>

Email Address 

3.2.2.3 Checkboxes and radio buttons

There are accessibility issues with radio buttons. The select form control must be used instead. Read Replacing Radio Buttons with Selects for more details.

<div class="alignCenter">
<fieldset>
<legend>Preferred colour </legend>
<input type="checkbox" name="check1" id="check1" value="Red" />
<label class="alignTopLeft" for="check1">Red</label><br />
<label class="alignTopLeft" for="check2">White</label>
<input type="checkbox" name="check2" id="check2" value="White" />
</fieldset></div>

Preferred colour

Red
White

3.2.2.4 Text area (different lines)

<div class="alignCenter">
<label class="alignTopLeft" for="comments">
<strong>Comments</strong></label></div>
<div class="alignCenter">
<textarea name="comments" id="comments" rows="5" cols="30"></textarea></div>

Comments

3.2.2.5 Text area (same line)

<div class="alignCenter">
<label class="alignTopLeft" for="comments2">
<strong>Comments</strong></label>&nbsp;
<textarea name="comments2" id="comments2" rows="5" cols="30"></textarea></div>

Comments 

3.2.2.6 Select (different lines)

<div class="alignCenter">
<label class="alignTopLeft" for="prov">
<strong>You live in </strong></label></div>
<div class="alignCenter"><select name="prov" id="prov">
<option value="" selected="selected"></option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="Other">Other</option>
</select></div>

You live in

Alberta British Columbia Manitoba Other

3.2.2.7 Select (same line)

<div class="alignCenter">
<label class="alignTopLeft" for="prov2">
<strong>You live in </strong></label>
<select name="prov2" id="prov2">
<option value="" selected="selected"></option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="Other">Other</option>
</select></div>

You live in Alberta British Columbia Manitoba Other

3.2.2.8 Submit and reset buttons

<div class="alignCenter">
<input type="submit" value="Submit" />
&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="Clear" /></div>