When creating a page, some content management systems make you choose a column layout for the page. In mojoPortal CMS, all the included skins support automatic column layout from 1 to 3 columns for the main layout. 

What you need to understand is that there are 3 placeholders in layout.Master, divLeft, divCenter, and divRight which will be populated by content from the content management system. For any given page, the content system may include content in any of these placeholders and the logic behind our master page will adjust the CSS class name used for divCenter depending on what content actually exists for the specific page and also whether the divLeft or divRight contains the Menu. This makes it possible to have automatic column layout from 1 to 3 columns based on which panels you put the features in.

You can optionally have up to 2 extra content regions. It is also possible to do additional column layouts within feature content using Content Templates.

Here is the logic of how the CSS class for the center is determined:

• If the page has the Menu in divLeft or any other content in divLeft, and no content in divRight, then the divCenter will be assigned the CSS class: center-leftmargin
• If the page has the Menu in divRight or any other content in divRight and no content in divLeft, then divCenter will be assigned the CSS class: center-rightmargin
• If the page has the Menu in divLeft or any other content in divLeft, and also has content and/or a Menu in divRight, then the divCenter will be assigned the CSS class: center-rightandleftmargins
• If the page has no content and no Menu in both divLeft and divRight, then divCenter will be assigned the CSS class: center-nomargins
• Also if divLeft or divRight have no content and no Menu, the Visible property of the div will be set to false, completely removing it from the markup.

So the CSS classes assigned to the center panel are meant to provide room for the left and/or right columns when they have content in them by adjusting widths and margins as needed on the center.

So essentially each page can have 1, 2, or 3 columns automatically depending on what is in the content system for the page and the style properties for these classes define how those columns will be laid out.

There are basically 2 approaches to column layout as used in skins included with mojoportal, absolute positioning of side columns or floating all columns. Other approaches may be possible as well, but these are the techniques used in included skins.

Absolute Positioning of Left and Right Columns

The first approach uses absolute positioning for the left and right sides. One of the advantages of this approach is that it can be better for SEO (Search Engine Optimization) because with absolute postiiong you can put the left and right side content at the bottom of the page physically, allowing the center which presumably has the most important content to occur sooner in the rendered markup. The disadvantage of this approach is that things that are positioned absolutely are taken "out of the flow" of the page. Therefore left and right side content do not push the footer down, only center content pushes the footer down, so if there is more content in left or right than in center, the footer rises up to the bottom of the center and this can be undesireable. You can modify a skin to change its layout from one approach to the other if you are good with CSS.

An example of the absolute positioniong approach is like this:

.leftside { position: absolute; left:6px; top:172px; width:160px; }
html>body .center-nomargins { margin: 3px 5px 0px 5px; }
html>body .center-rightandleftmargins { margin: 0px 172px 0px 172px; }
html>body .center-rightmargin { margin: 0px 172px 0px 5px; }
html>body .center-leftmargin { margin: 0px 5px 0px 172px; }
.rightside { position: absolute; right: 6px; top:172px; width:160px; }

All Columns Floated Left

The second approach for column layout used in some mojoportal skins is to float everything left and use margins to separate them. This approach does not have the problem with the footer, but it also does not have the SEO advantage. The left column comes first followed by middle and right.

An example of the floated approach is:

.leftside { float:left; width:186px; margin: 10px 10px 0px 5px; }
.center-nomargins {float:left; width: 818px; margin: 10px 12px 0px 18px;}
.center-rightandleftmargins {float:left; width:455px; margin: 10px 0px 0px 0px;}
.center-rightmargin {float:left; width: 642px; margin: 10px 0px 0px 10px;}
.center-leftmargin { float:left; width: 642px; margin: 10px 0px 0px 0px; }
.rightside { float:left; width:186px; margin: 10px 0px 0px 10px; } 

Other approaches to column layout are also possible.

What If I Need Different Class Names for the Column Layout?

In some cases you may wish to use custom css classes instead of the default class names for column layout. For example many CSS grid systems have their own conventions for class names used to achieve columns. For example Twitter bootstrap has a grid system that needs specific class names, but the class names need to be assigned programmatically to adapt the column layout to the actual content of the page since some pages only need 1 or 2 columns while others need 3. As of mojoPortal CMS version 2.3.9.0 we impemented a way for you to control them.

1. Add this in your layout.master file just above the <form element:

<portal:LayoutDisplaySettings ID="LayoutDisplaySettings1" runat="server" />

2. Then in theme.skin you can assign your custom CSS classes as in this example where we use the grid system CSS classes from a skin based on Twitter Bootstrap:

<portal:LayoutDisplaySettings runat="server"
LeftSideNoRightSideCss="span3"
RightSideNoLeftSideCss="span3"
CenterNoLeftSideCss="span9"
CenterNoRightSideCss="span9"
CenterNoLeftOrRightSideCss="span12"
CenterWithLeftAndRightSideCss="span6"
/>

More Than 3 Content Panels

Almost all page layout scenarios can be accomplished using from 1 to 3 column layout but occasionally you run into a situation where you would like to be able to edit content above or below these 3 columns. To accomodate this there is support for 2 optional extra content placeholders in the layout.master file of the skin. The skin named ramblingsoul-5contentpanes (found in the extra-skins.zip download) illustrates this feature by putting one above and one below the 3 center columns.

<asp:Panel ID="divAlt1" runat="server" CssClass="altcontent1">
<asp:ContentPlaceHolder ID="altContent1" runat="server"></asp:ContentPlaceHolder>
</asp:Panel>

<asp:Panel ID="divAltContent2" runat="server" CssClass="altcontent2">
<asp:ContentPlaceHolder ID="altContent2" runat="server"></asp:ContentPlaceHolder>
</asp:Panel>

If these are present in the layout.master they will show up in the PageLayout page and in the Content Manager Publishing page as options and you can place content instances into them. If you later change to a skin that does not have these optional content panes the content will be rendered in the center.

Note this feature is for advanced scenarios, its really not recommended to use these unless you have a specific need for them. It doesn't make sense for example to put a blog in the header or footer and this is true of other features too. The bottom line is if it makes sense for what you are trying to do then use it but don't post in the forums asking why it doesn't look right if you put your blog in the header.

Note that if these panels don't have content instances in them, they will be hidden by default. If you want to always show them even when they have no content instances in them, you can set these properties on StyleSheetCombiner control in your layout.master file:

<portal:StyleSheetCombiner HideEmptyAlt1="false" HideEmptyAlt2="false"...

Artisteer Uses Different Classes for Layout

Note that Artisteer uses different CSS classes for column layout.

.art-layout-cell .art-content-wide {} corresponds to .center-nomargins {}
.art-layout-cell .art-content-narrow {} corresponds to .center-rightandleftmargins {}
.art-layout-cell .art-content {} corresponds to .center-rightmargin {} and .center-leftmargin {}
.art-layout-cell .art-sidebar1 {} corresponds to .leftside {}
.art-layout-cell .art-sidebar2 {} corresponds to .rightside {}