University at Buffalo - The State University of New York
Skip to Content
UB Web Management

Transforming UB’s digital communications through process and tools

Column Control Component

Use this layout tool to divide your page into a multi-column display, develop vertical alignment, or pad space between columns of information.

A column control cannot be placed inside another column control.

The Column Control component in its initial, default state.

The Column Control component in its initial, default state.

Using This Component

Add the component to the page. There is only one tab.

It loads with two bars, Start of Columns and End of Columns. Content is dropped or added between these two bars.

New Experimental Settings

For nine-column pages ('Wide-Right Column') there are two new experimental settings: two 4½-4½ columns and four 2¼-2¼-2¼-2¼ columns. Be careful if you use them -- they have not yet been tested for all components.

UBCMS pages have twelve columns, whose availability for use depends on the page layout that is chosen. 

  • 'Three Column (default)' allocates 3 columns for the left sidebar, 6 to the center well, and 3 for the right sidebar.
  • 'Two Column (wide on right)' allocates 3 columns for the left sidebar, and 9 to the center well.
  • 'Two Column (wide on left)' allocates 9 columns to the center well, and 3 for the right sidebar.
  • 'One Column' allocates all 12 columns (the full width) to the center well.

Thus the center well can be 6 or 9 or 12 columns wide. 

When you add a Column Control container to the center well, you must then choose the Column Layout.

  • 'Three Column' - Chose from: 
    • 2 physical columns (3-3)
    • 2 physical columns (2-4) 
    • 3 physical columns (2-2-2)
  • 'Two Column' - Chose from: 
    • 2 physical columns (6-3)
    • 2 physical columns (4-4)
    • 3 physical columns (3-3-3)
    • 4 physical columns (2-2-2-2)
    • 2 physical columns (4½-4½) experimental
    • 4 physical columns (2¼-2¼-2¼-2¼) experimental
  • "One Column" - Chose from: 
    • 3 physical columns (4-4-4) 
    • 3 physical columns (3-6-3)

Once you have divided your main content area into columns, drag and drop components into each column. Equal amounts of white space will be added between the columns.

The Column Control component opened for editing.
The Column Control component opened for editing. In this case, options are shown for a two-column page, wide on the right.

Restrictions

  1. You cannot put a column control inside another column control.
  2. Column Control can only be used within the main content area; it cannot be used in the sidebars or a Related Content Container.
  3. You can only control the available space. To gain more width, and more column options, enter the Page Properties and choose another Page Type.

Was this page helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)

On this page:

See An Example:

Tip: Learn how to add a quick link to the top of your page.

Related Components

Last Revised:

April 20, 2017