1

I'm trying to place these two modules 1

side by side. They are in the same position and the proper ordering. I've also created a new module suffix for the width of the modules. Here's the code:

 .box.color3 .content {
   clear: none!important;
   float: left;
   width: 50%;
}

.box.color3 .header {
   color: #0090BE;

}

.box.border.color3 {
clear: none!important;
   float: left;
   width: 50%;

}

Also, I'm running the site locally so I couldn't provide the link of the website.

3 Answers 3

0

If you want to place two modules side by side within a single module position, you could try the following:

  1. Publish each of the two modules to custom positions (e.g. "myLeftModule" and "myRightModule").
  2. Add the following CSS to your site to allow for a two-column layout (there are many ways to achieve this, this is just an example) :

    #wrap {
       width:100%;
       margin:0 auto;
    }
    #left_col {
        float:left;
       width:50%;
    }
    #right_col {
       float:right;
       width:50%;
    }
    
  3. Create a new Custom HTML module, and add the following code to create a two column layout:

    <div id="wrap">
        <div id="left_col">
            {loadposition myLeftModule}
        </div>
        <div id="right_col">
            {loadposition myRightModule}
        </div>
    </div>
    

    The {loadposition ...} tag will load your modules from the given positions, and they should align nicely side by side.

  4. Before saving your module, remember to activate "Prepare content" in your Custom HTML module in order allow the {loadposition} tag to work: Joomla module Prepare content

0

It's hard to tell, without knowing the html of the page. The css you provided means nothing at its own.

So a few things to consider:

Even in the case that the css you created is proper to left-align 2 elements, it doesn't mean it would work everywhere.

It can be that other css rules take precedence over your rules, or that you are not applying your rules to the proper classes - wrong using of css selectors.

Normally, you will need to float-left, or display-inline the 2 wrapper elements of your modules' content, which shall be the child elements inside the wrapper-element of the module position.

Apart of the floating, you need to make sure that their total widths including margins, borders, paddings is max 100%.

You need to use your browser's inspector to find out what's going on with your mark-up and css.

2
  • Thanks for the quick reply. Are there any modules to accomplish a similar effect?
    – TheAdnan
    May 8, 2015 at 12:25
  • Apart that you wanted to left-align 2 elements, I can't know what exactly you are trying to do - and what content the modules should display, but yes there are modules that can display content in grid / columns and every possible arrangement. You can check in JED for this.
    – FFrewin
    May 8, 2015 at 12:30
0

EDIT

To expand on a good point by Lodder, this is not an ideal solution if the Bootstrap library is not already being used in other facets of the website.

You can do this easily using built on bootstrap library. First, at top of PHP file load the library:

 JHtml::_('bootstrap.framework');

Then turn your HTML like so:

<div>
    <div class="pull-left">
        Content
    </div>
    <div class="pull-right">
         Content
    </div>
    <div class="clearfix"></div>
</div>

How this helps!

2
  • Bootstrap framework is extremely overkill (if it isn't already being imported) for something that only requires a few lines of CSS
    – Lodder
    May 8, 2015 at 23:39
  • Excellent point, however IMO the majority of Joomla sites will already have the library loaded if they are using any core components or modules since they rely heavily on Bootstrap for scaffolding and styling. Will adjust answer to reflect your point. May 9, 2015 at 0:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.