ITS

Information Technology Services
Information Technology Services

Page and Column Layouts


Generic Page Layouts

The following classes are available for your use in laying out content on your site: 

  • Layout-width-nn, where nn = % in increments of 5 (e.g. 50, 55, etc.): This layout will allow you to define the width of the element. 
  • Layout-right: This layout will allow you to align your element to the right of the page.
  • Layout-center: This layout will allow you to align your element to the center of the page. Note: The layout-center class must be used in combination with the layout-width-nn class, as shown in example 3. 

The table below provides some examples of how you could use these classes in your HTML source code:

  This HTML Creates this in WebPublish
1

<div class="layout-width-50">

The width of this element has been set to 50%, meaning that it will only span this percentage of the cell.

</div>

The width of this element has been set to 50%, meaning that it will only span this percentage of the cell.
2

<div class="layout-right">

This content will be aligned to the right.

</div>

This content will be aligned to the right.
 
3

<div class="layout-width-75 layout-center">

This content will span 75% of the cell and will be centered.

</div>

This content will span 75% of the cell and will be centered.

2-Column Layout

If you would like the appearance of a table, but do not have the appropriate data for a table, the 2-column layout can be used to place content in two columns side-by-side. If you'd prefer to use three columns, we also offer markup to add a 3-column layout.

The following shows delineated 2-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
 

3-Column Layout

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

In contrast to the 2-column layout, the 3-column layout is designed such that the width of each column is fixed to 30% of the page width.


Markup

<div class="column-layout-3">

<div class="layout-width-30">
Content for first column
</div>

<div class="layout-width-30">
Content for center column
</div>

<div class="layout-width-30">
Content for third column
</div>

</div>

Adding the markup to the page

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

Example

<div class="column-layout-3">

<div class="layout-width-30">

<img alt="Mackintosh-Corry walking path in Spring" src="/its/sites/webpublish.queensu.ca.itswww/files/images/webpublish/tutorials/enhancements/columnlayouts/2477.jpg" style="width: 600px; height: 400px;" />
<p>Find out more on the<a href="https://www.queensu.ca/"> Queen's website</a>.</p>

</div>

<div class="layout-width-30">

<img alt="A campus walking path after rain" src="/its/sites/webpublish.queensu.ca.itswww/files/images/webpublish/tutorials/enhancements/columnlayouts/7256.jpg" style="width: 600px; height: 400px;" />
<p>Find out more on the<a href="https://www.queensu.ca/"> Queen's website</a>.</p>

</div>

<div class="layout-width-30">

<img alt="A campus walking path in the Fall" src="/its/sites/webpublish.queensu.ca.itswww/files/images/webpublish/tutorials/enhancements/columnlayouts/7310.jpg" style="width: 600px; height: 400px;" />
<p>Find out more on the<a href="https://www.queensu.ca/"> Queen's website</a>.</p>

</div>

</div>

Result

Mackintosh-Corry walking path in Spring

Find out more on the Queen's website.

A campus walking path after rain

Find out more on the Queen's website.

A campus walking path in the Fall

Find out more on the Queen's website.