Joomla Tutorials and Blog Posts

Create a Two Column Layout in a Joomla Article Using JCE

April 7, 2011 | Written by Nick Savov

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.

 


 

 


To sign up for complete classes and support

 

Comments  

 
#1 Sergey 2011-04-08 00:24
Nice way, guys. Thanks for tutorial about JCE, very useful for me.
 
 
#2 iowawebco 2011-04-08 12:21
You're very welcome, Sergey! :)
 
 
#3 kcocke 2011-04-26 11:23
How do I insert divs? Do I type them in or insert them with a button?
 
 
#4 iowawebco 2011-04-26 15:01
Hi kcocke,

Just type them in :)

Kind regards,
Nick
 
 
#5 sonia_greece 2011-08-03 06:14
unfortunately, the float option creates a bug in jce and i cant use it ..

i want to make a custom module with two columns but when i put the float option the style changes and i cant use it ..

can you suggest a solution ?? thanks...
 
 
#6 iowawebco 2011-08-03 16:48
Hi Sonia,

You might want to double check on that. Floating something shouldn't cause any styles to change. Perhaps you made a mistake on accident somewhere.

Kind regards,
Nick
 
 
#7 premier69 2011-11-13 21:34
Thanks dude, really, thank you!
 
 
#8 iowawebco 2011-11-15 00:51
You're very welcome! :) You should consider becoming a student at OSTraining. There's a lot more available to our students. Check it out: www.ostraining.com/online

Kind regards,
Nick
 

Add comment


 


To sign up for complete classes and support