ARCHIVED - CSS - Common CSS solutions

Warning This information has been archived because it is outdated and no longer relevant.

Archived Content

Information identified as archived on the Web is for reference, research or recordkeeping purposes. It has not been altered or updated after the date of archiving. Web pages that are archived on the Web are not subject to the Government of Canada Web Standards. As per the Communications Policy of the Government of Canada, you can request alternate formats by contacting us.

Table of Contents

1.0 Aligning text, images, or form controls

See How to align text, images and form controls.

2.0 Indenting text, images, or form controls/putting text into a borderless box with a background colour without using a table

See How to indent text, images and form controls.

3.0 Wrapping text around images and tables

See Wrapping text around images and tables.

4.0 Creating a box with a border and a background colour without using a table

  1. Place the classes you need in a CSS file (for example, institution.css of the GC CLF 2.0 template) as shown below:

    div.box {background-color: #CC0000; width : 80%; border: 1px solid #000000;}

  2. Make your code similar to the following example:

    <div class="box">
    Text in a box with a black border and red background.
    </div>

5.0 Title with a Help link floating to the right

The floatRight CSS class has 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 class:

  • .floatRight {float: right;}

Make your code similar to the following example:

<p class="floatRight"><a href="...">Help</a></p><h3>Title</h3>

6.0 Simulating a single-column, multi-row table with a background colour and a border

  1. Place the classes you need in a CSS file (for example, institution.css of the GC CLF 2.0 template) as shown below:

    div.box {background-color: #CC0000; width : 80%; border: 1px solid #000000;}

  2. Make your code similar to the following example:

    <div class="box">
    Row 1 with a red background and a black border.
    </div>
    <div class="box">
    Row 2 with a red background and a black border.
    </div>
    <div class="box">
    Row 3 with a red background and a black border.
    </div>

7.0 Simulating a two-column single row table

  1. Place the classes you need in a CSS file (for example, institution.css of the GC CLF 2.0 template) as shown below

    div.row {float: left; margin: 0; padding: 0; width: 98.5%;}
    div.cols2 {float: left; width: 49%; margin: 0 3px 0 0; padding: 0;}

  2. Make your code similar to the following example:

    <div class="row">
    <div class="cols2">Column 1</div>
    <div class="cols2">Column 2</div>
    </div>

8.0 Simulating a two-column multi row table

  1. Place the classes you need in a CSS file (for example, institution.css of the GC CLF 2.0 template) as shown below

    div.row {float: left; margin: 0; padding: 0; width: 98.5%;}
    div.cols2 {float: left; width: 49%; margin: 0 3px 0 0; padding: 0;}

  2. Make your code similar to the following example:

    <div class="row">
    <div class="cols2">Row 1 - Column 1</div>
    <div class="cols2">Row 1 - Column 2</div>
    </div>
    <div class="row">
    <div class="cols2">Row 2 - Column 1</div>
    <div class="cols2">Row 2 - Column 2</div>
    </div>
    <div class="row">
    <div class="cols2">Row 3 - Column 1</div>
    <div class="cols2">Row 3 - Column 2</div>
    </div>

9.0 Simulating a three-column single row table

  1. Place the classes you need in a CSS file (for example, institution.css of the GC CLF 2.0 template) as shown below:

    div.row {float: left; margin: 0; padding: 0; width: 98.5%;}
    div.cols3 {float: left; width: 32%; margin: 0 3px 0 0; padding: 0;}

  2. Make your code similar to the following example:

    <div class="row">
    <div class="cols3">Column 1</div>
    <div class="cols3">Column 2</div>
    <div class="cols3">Column 3</div>
    </div>

10.0 Simulating a three-column multi-row table

  1. Place the classes you need in a CSS file (for example, institution.css of the GC CLF 2.0 template) as shown below:

    div.row {float: left; margin: 0; padding: 0; width: 98.5%;}
    div.cols3 {float: left; width: 32%; margin: 0 3px 0 0; padding: 0;}

  2. Make your code similar to the following example:

    <div class="row">
    <div class="cols3">Row 1 - Column 1</div>
    <div class="cols3">Row 1 - Column 2</div>
    <div class="cols3">Row 1 - Column 3</div>
    </div>
    <div class="row">
    <div class="cols3">Row 2 - Column 1</div>
    <div class="cols3">Row 2 - Column 2</div>
    <div class="cols3">Row 2 - Column 3</div>
    </div>
    <div class="row">
    <div class="cols3">Row 3 - Column 1</div>
    <div class="cols3">Row 3 - Column 2</div>
    <div class="cols3">Row 3 - Column 3</div>
    </div>