Placing two modules side by side

Question

I'm trying to place these two modules

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.

Answer 1

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:

Answer 2

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.

Answer 3

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!