Digital

Columnar layouts

Further Information

The Visual Identity is a part of the UWA Communications Strategy, and its use must be authorised by the University Website Office.


Page layouts


Page elements


Content containers


A standard page layout on the UWA website consists of two or three columns; the main content area can be split into additional columns as needed.

The left-most column is used for the main navigation, and cannot be edited by users. The content area can be split into a larger left and smaller right column by creating additional divs (divisions).

The primary content area (the larger left column, if split into two columns as defined in the previous paragraph) can be separated into additional columns via the CSS classes:

  • floathalf
  • floatthird
  • floattwothirds

A new div with a class of clearleft must be created below columns with these classes to reset the flow to the left of the page.

The floathalf and floatthird column classes should not exceed the maximum page width. That is, do not have a floathalf column followed by a floattwothirds column as this will exceed the maximum page width and break the flow.

Examples

Floathalf column layout

This is the first floathalf column.

This is the second floathalf column.

Floatthird column layout

This is the first floatthird column.

This is the second floatthird column.

This is the third floatthird colum.

Floattwothirds column layout

This is the floattwothirds column.

This is the floatthird column.

Implementation in Matrix

For each content div to be floated insert a new div, entering the appropriate float class name in the Class field.

Beneath the floated divs, create a new div with a Presentation type of Raw HTML and a Content Type of Snippet. Select Float - clearleft from the snippet drop-down list.

Technical implementation

Floathalf column layout

<div class="floathalf">
   Column Content 
</div>
<div class="floathalf">
   Column Content 
</div>
<div class="clearleft;"></div>

Floatthird column layout

<div class="floatthird">
   Column Content 
</div>
<div class="floatthird">
   Column Content 
</div>
<div class="floatthird">
   Column Content 
</div>
<div class="clearleft;"></div>

Floattwothirds column layout

<div class="floattwothirds">
   Column Content 
</div>
<div class="floatthird">
   Column Content 
</div>
<div class="clearleft;"></div>