Creating Columns on Web Pages

To create columns on a web page you need to use the HTML tab at the bottom of the editor when formatting a page. If you are unfamiliar with HTML coding you will need to get some assistance. Creating columns is not very complex, but you do need too understand how it works and the basics of HTML coding.

If you do not want to code a HTML tag directly, you may be able to use snippets to insert the special codes described here. At the top of the editor, use the "Insert" tab. Place the cursor where you want the code snippet placed and select the appropriate snippet item from the "Insert Code Snippet" list.

Columns can be created with tables or the “div” tag or any of the HTML 5 group tags (header, section, article, aside, footer, nav). You should avoid tables whenever possible because they will not display properly on a mobile device or respond to the size of the browser window properly. You should group your column text instead in a grouping tag and float it to the left or right of a page or use the "grid" or "flexbox" method for columns. If the browser or mobile device width is not wide enough for multiple columns, one will appear above the other.

Creating Columns with DIV or Group Tags

Use the system defined classes FloatLeft or FloatRight (also described below) on your group tags to position your columns. You will want to specify a MaxWidth value via a Style parameter to set the width of your columns. Code your floated columns above your main column. The main column will use the remaining width. Below your columns you need "<div> style='clear:both;'</div>".

Creating Equal Size Columns

The "grid" CSS system provides a method for creating columns of equal size. Typically this would be 3 columns, but the number of columns is up to you. If the screen is narrow, such as a phone, a single column is displayed. The column widths grow and shrink based on the space available on the screen.

Use the SPIGridBalancedContainer class on a "div" or "section" tag to define the container for the columns. Each immediate child of the container becomes a new column. Each column will have the same width balanced within its parent container.

You can use the "Balanced Column Container" snippet to create your container for the columns and use the "Article for a Column" snippet to create a column within the container.

Example of Balanced Columns

This example uses the "grid" system to create three columns. Each column will be the same width as the others and fill the width of the container.

<section class="SPIGridBalancedContainer">
<article>
<p>
This is text for this column.
This is text for this column.
This is text for this column.
This is text for this column.
This is text for this column.
This is text for this column.
This is text for this column.
This is text for this column.
</p>
<p>
This is text for this column.
This is text for this column.
This is text for this column.
This is text for this column.
This is text for this column.
</p>
</article>
<article>
<p>
This is text for this column.
This is text for this column.
This is text for this column.
This is text for this column.
This is text for this column.
This is text for this column.
</p>
</article>
<article>
<p>
This is text for this column.
This is text for this column.
This is text for this column.
This is text for this column.
This is text for this column.
This is text for this column.
This is text for this column.
This is text for this column.
This is text for this column.
This is text for this column.
</p>
<p>
This is text for this column.
This is text for this column.
This is text for this column.
</p>
<p>
This is text for this column.
This is text for this column.
</p>
</article>
</section>

Creating Columns with Flexbox

Another system for creating columns that respond well to mobile devices is to use a system based on the "flexbox" CSS capabilities. Your website has some classes to assist in configuring a common case for creating columns.

With flexbox formatting you create a container that holds all of your columns using one of the grouping tags, like "section". This group needs to use the class "SPIFlexRowContainer".

Inside your flexbox container you need groups for the columns. You need to code these in the order they should appear on a phone, which will need to stack one on top of the other. This would usually be an "article" for your main column followed by one or two "aside" tags.

Use the class "SPIFlexMain" on your "article" tag. Your "aside" tags need two classes. "SPIFlexAside" identifies the group as a minor column. "SPIFlexAside-Left" and "SPIFlexAside-Right" are used to identify a left or right column. The main column is positioned in the middle.

Naturally, you can code your own style sheets to format differently using the flexbox system. The provided CSS classes try to handle the most common case. You can also override values from the style sheet using the "style" operand on a tag, such as providing a different "max-width" for an aside column. Do a Google search for CSS flexbox cheat sheet" for more information.

Example of Flex Columns

This example uses the flexbox system to create three columns. The main column is in the middle with smaller columns on the left and right sides.

<section class="SPIFlexRowContainer">
<article class="SPIFlexMain">
<p>
This is body text that goes between the columns.
This is body text that goes between the columns.
This is body text that goes between the columns.
This is body text that goes between the columns.
This is body text that goes between the columns.
This is body text that goes between the columns.
This is body text that goes between the columns.
This is body text that goes between the columns.
</p>
<p>
This is body text that goes between the columns.
This is body text that goes between the columns.
This is body text that goes between the columns.
This is body text that goes between the columns.
This is body text that goes between the columns.
This is body text that goes between the columns.
This is body text that goes between the columns.
This is body text that goes between the columns.
</p>
</article>
<aside class="SPIFlexAside SPIFlexAside-Left">
<p>
This is text on the Left.
This is text on the Left.
This is text on the Left.
This is text on the Left.
</p>
<p>This is text on the Left.</p>
</aside>
<aside class="SPIFlexAside SPIFlexAside-Right">
<p>
This is text on the Right.
This is text on the Right.
This is text on the Right.
</p>
<p>This is text on the Right.</p>
<p>
This is text on the Right.
This is text on the Right.
</p>
</aside>
</section>

System Defined Style Classes

The handling themes involves loading hundreds of different style sheets based on the current theme. There are a few system defined CSS classes that might be useful. You would just add the "class=" parameter on your tag, which is typically a "div" tag.

SPIHideWhenPrinting: This prevents the contents of the tag from being printed is the Print button is used in the browser.
SPIHideMobile: The tag contents will not be displayed if being viewed on a phone.
FloatLeft: The tag will be floated to the left with margins on all but the left edge. This is normally a "div" tag.
FloatRight: The tag will be floated to the right with margins on all but the right edge. This is normally a "div" tag.
SPIGridBalancedContainer: This identifies a container using the "grid" system for creating columns. Each immediate child of the container becomes a new column. Each column will have the same width balanced within its parent container. This class is usually placed on a "section" tag and the columns would normally use an "article" tag, but "div" tags also work.
SPIFlexRowContainer: This identifies a container using the flexbox system for creating columns. This is normally placed on a grouping tag like "section".
SPIFlexMain: This identifies the main column inside a SPIFlexRowContainer container. This is normally placed on a grouping tag like "article".
SPIFlexAside: This identifies the minor column inside a SPIFlexRowContainer container. This is normally placed on a grouping tag like "aside".
SPIFlexAside-Left: This identifies the left minor column inside a SPIFlexRowContainer container. This is normally placed on a grouping tag like "aside" and is addition to the "SPIFlexAside" class which should be present on the same tag.
SPIFlexAside-Right: This identifies the right minor column inside a SPIFlexRowContainer container. This is normally placed on a grouping tag like "aside" and is addition to the "SPIFlexAside" class which should be present on the same tag.
center: This class will only work is inside a fixed width container. The item will be centered using "margin-left:auto; margin-right:auto; text-align:center;".
ErrorPanel: This is used on a "div" tag to create a block of highlighted text formatted to display an error message. This is the same formatting used when displaying Alerts.
HighlightTextPanel: This is used on a "div" tag to create a highlighted block of text with the themed border and background.

This website is hosted by Visual Pursuits, a service provided by Software Pursuits, Inc.