There are a number of column combinations available to help create interesting page layouts. You can find them in /SharedResources/MiniTemplates/Column-Layouts
2 columns 15/85
15% column
Often used for numbers and dates.
85% column
This column has been used for information that corresponds to a number or date in the left column.
2 columns 25/75
25% column
Often used for numbers and dates or general titles.
75% column
This column has been used for information that corresponds to a number or date in the left column.
2 columns 30/70
30% column
The text in this column should not fall below the bottom of the image on the right.
Any additional text should be added beneath this mini template for best results.
70% column
2 columns 50/50
50% column
This mini template works really well on pages where you have a fair amount of text and an image to accompany it.
50% column
2 columns 70/30
70% column
This column combination's main use is to have general content and imagery in the left column and important links in the right column.
30% column
3 columns 20/40/40
20% column
A three column layout with one smaller column and two even larger columns.
40% column
A three column layout with one smaller column and two even larger columns.
40% column
3 columns 20/60/20
20% column
A three column layout with two smaller columns either side of a larger central columns.
60% column
A three column layout with two smaller columns either side of a larger central columns.
20% column
3 columns 30/30/30
30% column
A great use (most common) of three columns is to link users to key information.
30% column
Three columns are often used on school and faculty homepages to display news, events and useful links.
30% column
4 columns at 25%
25% column
Four column layouts can work well on full width homepages.
25% column
The four column layout isn't used much on standard pages but works really well on full width pages.
25% column
You might use this layout to display icons with a short amount of accompanying text to more information.
25% column
5 columns at 20%
20% column
Five columns are the least used mini template on the university website.
20% column
That is because the columns are very narrow.
20% column
The main use is to show partnership (or similar) logos and iconography.
20% column
How columns work on mobile devices (responsive columns)
The below layouts explain how columns fall under one another on mobile devices.
Many of our users visit using their mobile device rather than a desktop computer, so it is very important that you check that your layout works on different screen sizes. You can check this quickly by changing the size of your browser window while previewing your webpage to see how things display at a smaller screen size. Most web browsers also have in built tools to do this.
Regular columns
Column A1
This is the top most column.
Column A2
This falls below column A1.
Column B1
This falls below column A2.
Column B2
This falls below column B1.
Column B3
This falls below column B2.
Column C1
This falls below B3.
Column C2
This falls below C1.
Column C3
This falls below C2.
Column C4
This falls below C3.
Nested columns
Column D1
This is the top most column.
Having lots of content within this column, including other column combinations will increase the length of the column! Anything in column D2 will fall beneath everything within D1.
Column E1
This is the first column within D1.
Column E2
This falls below column E1.
Column D2
This falls below D1.