CSS - Common CSS solutions

Table of Contents

• 1.0 Aligning text, images, or form controls
• 2.0 Indenting text, images, or form controls/putting text into a borderless box with a background colour without using a table
• 3.0 Wrapping text around images and tables
• 4.0 Creating a box with a border and a background colour without using a table
• 5.0 Title with a Help link floating to the right
• 6.0 Simulating a single-column, multi-row table with a background colour and a border
• 7.0 Simulating a two-column single row table
• 8.0 Simulating a two-column multi row table
• 9.0 Simulating a three-column single row table
• 10.0 Simulating a three-column multi-row table

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>