In case you want to display content in a multi column layout in your Joomla article, the below will line out how to do it.

Assumption is however that you are using the Joomla default template Protostar.

Else it can not be guaranteed to be working.

HTML Code or Editor extension?

In order to get this working you have to switch to the HTML view of the Joomla Content Editor (JCE) and modify some HTML in your article.

It is also possible to install a separate content editor as an extension to Joomla, but I like to keep it simple and it is not really necessary to do so if you are not a super user.

Why keep it simple? Well, there are many reasons.

First of all opening your website for new threats with every new extension you install.

Secondly updating your website becomes a gamble and you would have to check version conflicts for each custom extension before updating.

Thirdly I like to know how things work.

Fourthly it is exposing you to the possibility of reworking all your articles in the future because the person or company supporting an extension has vanished.

Having said all that, one of the main advantages of Joomla is that it is highly customisable and with most extensions you will not run into trouble.

Of course you have to select them carefully.

How to use a Multi Column Layout in Protostar Template

First switch the Joomla Content Editor (JCE) to the HTML view.

To do so click on the button "Toggle editor" in the bottom right of the article page.

Then copy paste the following code snippet into your HTML code at the position you want the multi column layout to start.

<div class="row-fluid">
<div class="span6">
<h3>Area One</h3>
<p>...</p>
</div>
<div class="span6">
<h3>Area Two</h3>
<p>...</p>
</div>
</div>

This will give you the following two column layout provided you are using the Protostar template.

If you need a different ratio of column widths, you can add some CSS rules to your div tags of class span6.

<div class="row-fluid">
	<div class="span6" style="width: 20%;">
		<h3>Area One</h3>
		<p>Some Text</p>
	</div>
	<div class="span6" style="width: 70%;">
		<h3>Area Two</h3>
		<p>Some Text</p>
	</div>
</div>

The above code will for example allow the left column to take up 20% and the right column to take up 70% of the available space.

Play around with different window sizes by resizing your browser window. 

You can see that at some point the window is not wide enough anymore to display both columns in the same line anymore on my website.

This is because I added some custom CSS rules to the Joomla user.css to override default CSS rules in the Protostar template.

The rule responsible for keeping a minimum width for columns in a multi column layout is also placed there.

Custom CSS Rules for Multi Column Layout in Articles

I am using the Protostar template for my website.

Since I did not like the default template, I modified it by simply overriding CSS rules in template.css with custom rules in a new file called user.css.

If you are using the Protostar template without custom CSS rules applied, you might not need below changes.

I however changed for example the width of the content area to 80 %, which is one reason why I set the max width of the columns to 45 %.

Also the min-width of the columns is changed to 300 pixels.

/*
For multi-column layouts in articles I prefer a two column layout.
Three or more columns will have to be handled in an exception.
*/
.item-page .row-fluid .span6 {
	width: 45%;	
	min-width: 300px;
}

You can add more specific CSS rules for multi column layouts in the user.css to meet your needs.

This way you do not have to use the style attribute in the HTML code.