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;
}

    CSS Howto..

    How do you apply diferent colors from diferent css rules to the same object?

    How to make images go inline vs break to a new line?

    CSS: How to make a block to cover all width of parent block

    HTML/CSS: How to achieve the following center-left alignment?

    How to clear the (CSS) visited history of an Android WebView?

    How to scale a div without scaling content

    How to create CSS-based (big) quotation marks?

    How to display results comming from database in 3 columns using php/mysql/html/css

    How to get css value of an element inside array?

    Changing opacity for div in div - is this possible? How?

    how to make labels and button appear only when mouse is over a div in asp.net C#

    How do I get these two columns to have the same height at all times - CSS?

    How to place my dropdown CSS menu bar on top of my jQuery picture rotator?

    jqueryui dialog with table — how to limit row height

    How to change font on css?

    how to add a css class to a list when the particular li is clicked using jquery?

    How to fill a QTextBrowser with a single table in Qt?

    How to Edit the CSS File of the Installed Plugin in Wordpress

    When I use
    • , how to let the element inside the li float left but the

    How to change CSS display property using an anchor tag?

    How to switch visibility of an HTML div in css for overlaying

    How to stop people from viewing my HTML and CSS [closed]

    How to make the search form without the search button?

    How to write below CSS lines in zend framework 2 syntax?

    How to properly link CSS files with PHP footer and header

    How to create profession box shadow effect in div using css

    how to make a child div visible when clicking its parent div in pure css

    How can I get two form fields side-by-side, with each legend above the field?

    How can I center just one element within a container?

    How detect first div clicked when all of them absolute