The Joomlashack Blog

Create a Two Column Layout in a Joomla Article Using JCE

Written by Nick Savov Nick Savov
Published: 07 April 2011 07 April 2011

One of our students was wondering how to create a two column layout in a single Joomla article. We offered to create this tutorial for her.

This tutorial will show you step-by-step how to create a two column layout in a single Joomla article using JCE, a WYSIWYG editor. The tutorial will not use any tables which are not recommended as they can become quite messy.

Install JCE

If you haven't done so already, please install JCE. You can find the how to install JCE tutorial here.

Once you've installed JCE, go to the article for which you want two columns.

Insert Divs

tutuploadstutuploadstutuploadstutuploadsmedia_1302210961832.png

Click the Edit Code button.

tutuploadstutuploadstutuploadstutuploadsmedia_1302211295999.png

Insert an opening and closing div tags around each part that you want to be a column. You can see those tags circled in the image above. 

Once finished, Update

Style First Column with JCE's Built-in CSS Styling

tutuploadstutuploadstutuploadstutuploadsmedia_1302212037426.png

Highlight the part that you want to be the first column and then click the Edit CSS Style button.

tutuploadstutuploadstutuploadstutuploadsmedia_1302212439582.png

Box >> Width 40% >> Float left >> Margin >> Un-check Same for all >> RIght 25 pixels >> Update

Style Second Column with JCE's Built-in CSS Styling

tutuploadstutuploadstutuploadstutuploadsmedia_1302212788281.png

Highlight the second column and then click the Edit CSS Style button.

tutuploadstutuploadstutuploadstutuploadsmedia_1302213506110.png

Box >> Width 40% >> Float left >> Update

Apply

tutuploadstutuploadstutuploadstutuploadsmedia_1302213611566.png

Apply your changes and then preview the article in the front end. You can adjust the widths and margins to your liking.