How The Main Column Layout Works

How The Main Column Layout Works

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.

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.

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.

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.