ITS

Information Technology Services
Information Technology Services

Column Layouts

If you would like the appearance of a table, but do not have the appropriate data for a table, column layouts can be used to place content in two columns side-by-side.

The following shows delineated column layouts and is for illustrative purposes only. As shown in the example below, columns will not have a dashed outline.

column-layout-10-90

 
 
 
 

column-layout-20-80

 
 
 
 

column-layout-30-70

 
 
 
 

column-layout-40-60

 
 
 
 

column-layout-50-50 or column-layout-2

 
 
 
 

column-layout-60-40

 
 
 
 

column-layout-70-30

 
 
 
 

column-layout-80-20

 
 
 
 

column-layout-90-10

 
 
 
 

Markup

<div class="column-layout-x-y">

<div>
Content for left column
</div>

<div>
Content for right column
</div>

</div>

where x refers to the preset width (%) of the left column and y refers to the preset width (%) of the right column.

Here are the classes that can be used for two-column layouts.  The numeric values refer to approximate percentage (%) of the page width that each column will span.

  • column-layout-10-90
  • column-layout-20-80
  • column-layout-30-70
  • column-layout-40-60
  • column-layout-50-50
  • column-layout-60-40
  • column-layout-70-30
  • column-layout-80-20
  • column-layout-90-10

Adding markup to the page

  • In the source (HTML) copy and paste the markup for the column layout.
  • Replace the example text with your content.
  • Exit the source (HTML).
  • Save your page to view the layout (Note: column layout will not display while editing).
  • See also: Editing the Source Code tutorial

Example

Example using markup for column-layout-20-80 (right column = 20% width, left column = 80% width):

<div class="column-layout-20-80">

<div>
<img alt="Queen's tricolour flag" src=".../queens-tricolour-flag.jpg" style="width: 200px; height: 150px;" />
</div>

<div>
Curabitur imperdiet eu diam dictum consequat. Vivamus faucibus massa id enim placerat, a lacinia odio consectetur. Pellentesque ut convallis ipsum. Fusce vitae dignissim felis, sed tempor risus. Fusce vitae nisi quis urna ultricies scelerisque id eu orci. Quisque dignissim, tortor ac porttitor faucibus, turpis ligula aliquam massa, vel dictum nibh felis in urna
​</div>

</div>

Result

Queen's tricolour flag
Curabitur imperdiet eu diam dictum consequat. Vivamus faucibus massa id enim placerat, a lacinia odio consectetur. Pellentesque ut convallis ipsum. Fusce vitae dignissim felis, sed tempor risus. Fusce vitae nisi quis urna ultricies scelerisque id eu orci. Quisque dignissim, tortor ac porttitor faucibus, turpis ligula aliquam massa, vel dictum nibh felis in urna