ITS

Information Technology Services
Information Technology Services

Page and Column Layouts

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.

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