In Joomla: How to Float an Image Left or Right of Text

Here’s how to float an image left or right using JCE editor in Joomla, using your template’s custom styles.

image inserted into article in JCE editor
Image inserted into article in Joomla JCE editor

1) Create your article in the JCE editor, and get it far enough along that you have your text and image added to the article.  Put your image just ahead of the paragraph or list containing the text that’s to be floated alongside the image.

 

JCE editor showing an image selected and the styles menu open
Open the styles pull-down menu

2) Click on your image, then click on the styles pull-down menu to open it.  There are a bunch of styles there to choose from, listed in no particular order.  Scroll down to find the styles img-right and img-left.

 

image floating to the right of text, in JCE editor
Click to apply the style, observe that the image now floats to the right of the text

3) For our example, click the style img-right and note the image now floats to the right of the text in the JCE design view window.

4) Notice too, that the image now has a thin black border.  That is part of the CSS img-right style for this website, as well as custom margins all around the image.

How it works: For each Joomla website I create two custom CSS styles for floating images left or right.  I name them something like img-left and img-right, or image-left and image-right.  These styles will also apply the border and margins to the image, to match the style of your website.

image floating to the right of text on a web page
Front end view, image floated right with thin black border

The margins keep the text some distance from the edges of your image.  For an image floated to the right, I set the right margin to zero and the other top, bottom, and left margins to some small distance.

Extra credit: These custom styles go into the custom style sheet for the Joomla template, named something like custom.css.  In JCE editor global configuration I specify the location of this CSS file, so that the JCE design view window preview shows your article as it would look with these custom styles applied.