There may a time when you would like to have three modules side by side in a single module position such as in the image below.

Example of three modules side by side

Create a separate Module for each of the items. Assign a Module Class to each of the modules under the Advanced tab. They can all have the same class name assigned, if you wish.

Screenshot of Module Class Suffix

When assigning a Module Class you can type the class name into the text box. If you do not leave a space before the class name, the class will be appended to other terms. If you place a space in front of the class name in the text box, the class name will be left as is.

For example if you were to type the class name of "threeacross" in the text box without a space, and you assigned your module to position-2, the class name is appended to the end of custom in the manner below:

<div class="customthreeacross">
        ---Your module goes here---
<div>

Note that this will appear differently for different module positions.

If you leave a space before your class name in the text box, you will get HTML such as below:

<div class="custom threeacross">
        ---Your module goes here---
<div>

You can now target the class name in your custom stylesheet.

.threeacross {width: 32%; float: left; }

In your @media section of your stylesheet, you may want to change the width to 100% for smaller screen sizes so that they stack rather than sit side by side.

You might ask "Why not use a table and put these all in one module?"

The problem with tables is that they don't do well with responsive design. There would be no way to have the modules stack on top of each other for small screens. 

You might ask "Why not just use <div>s and put these items all in one module?"

You could, but with separate modules you could easily have some publish or unpublish at a certain date. It would be simple to rearrange the order of the modules. You could also stack two or more rows below the top row if you wanted a whole set of modules.


Has BJ.Zemplate.com helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts


Still not finding a special topic?

Use Google's Search function below for search the content of bj.zemplate.com.