Make converted joomla template show 2 colums in main content

Tags: php,html,css,joomla

Problem :

I have converted a html/css template into a joomla template following these steps: http://www.tobacamp.com/tutorial/5-easy-steps-converting-html-template-to-joomla-template/.

However it doesn't say anything about how to make the main content show two or three columns instead of one (like a newspaper etc).

I want the main content of my Joomla Home page to show articles in 2 or three columns.IN THE MAIN CONTENT only.

I have tried everything and doesn't work.

What php or css code i have to enter in order to have my articles showed in 2-3 columns in the main content, and not one under the another

---

Solution :

Although not supported by all browsers, you can (should) use CSS Multi Columns for that purpose. It works with IE10+, Opera 11.1+ (standard syntax) and Firefox 2+, Chrome 4+, Safari 3.1+ (vendor prefix). For other browsers, you can utilize a JS library.

Example Usage

HTML (index.php)

...
<jdoc:include type="message" />
<div id="content">
    <jdoc:include type="component" />        
</div>
...

CSS

#content {
    -webkit-column-count: 3;
    -webkit-column-width: 75px;
    -webkit-column-gap: 20px;
    -webkit-column-rule: 1px solid #fff;
    -moz-column-count: 3;
    -moz-column-width: 75px;
    -moz-column-gap: 20px;
    -moz-column-rule: 1px solid #fff;
    -o-column-count: 3;
    -o-column-width: 75px;
    -o-column-gap: 20px;
    -o-column-rule: 1px solid #fff;
    column-count: 3;
    column-width: 75px;
    column-gap: 20px;
    column-rule: 1px solid #fff;
}