Arranging two classes in close proximity

I need help aligning two classes that are stacked on top of each other to be displayed side by side.

Below is a screenshot of the two classes: https://i.sstatic.net/V0tLL.png

The right class is .testm_boxes1, and the left class is .testm_boxes2.

Here is the HTML and CSS code snippet:

.testm_boxes1 {
  text-align: center;
  float: right !important;
}

.testm_boxes2 {
  text-align: center;
  float: left !important;
}
<div class="wpb_wrapper">
  <h3 style="font-size: 30px;text-align: center;font-family:Roboto;font-weight:700;font-style:normal" class="vc_custom_heading vc_custom_1509530836762">What do others say?</h3>
  <div class="vc_row wpb_row vc_inner vc_row-fluid">
    <div class="testm_boxes1 wpb_column vc_column_container vc_col-sm-6">
      <div class="vc_column-inner ">
        <div class="wpb_wrapper">
          <div class="ult-just-icon-wrapper  ">
            <div class="align-icon" style="text-align:center;">
              <div class="aio-icon circle " style="color:#383785;background:#51b6ea;font-size:20px;display:inline-block;">
                <i class="Defaults-quote-left"></i>
              </div>
            </div>
          </div>
          <div class="wpb_text_column wpb_content_element ">
            <div class="wpb_wrapper">
              <div id="Content">
                <div class="boxed">
                  <div id="lipsum">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Phasellus sapien orci, varius vel accumsan ac,<br> varius eu nisl. Ut in mauris elementum, facilisis ex ac, tincidunt erat.</p>
                    <blockquote>
                      <p>
                        <em>-John Doe</em>
                      </p>
                    </blockquote>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="vc_row wpb_row vc_inner vc_row-fluid">
    <div class="testm_boxes2 wpb_column vc_column_container vc_col-sm-6">
      <div class="vc_column-inner ">
        <div class="wpb_wrapper">
          <div class="ult-just-icon-wrapper  ">
            <div class="align-icon" style="text-align:center;">
              <div class="aio-icon circle " style="color:#383785;background:#51b6ea;font-size:20px;display:inline-block;">
                <i class="Defaults-quote-left"></i>
              </div>
            </div>
          </div>
          <div class="wpb_text_column wpb_content_element ">
            <div class="wpb_wrapper">
              <div id="Content">
                <div class="boxed">
                  <div id="lipsum">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Phasellus sapien orci, varius vel accumsan ac,<br> varius eu nisl. Ut in mauris elementum, facilisis ex ac, tincidunt erat.</p>
                    <blockquote>
                      <p>
                        <em>-John Doe</em>
                      </p>
                    </blockquote>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

htmlcss

Answer №1

Your design includes a container called .vc_row surrounding each of the testm boxes.

<div class="wpb_wrapper">
  <div class="vc_row other_classes">
    <div class="testm_boxes1 other_classes">
      content
    </div>
  </div>
  <div class="vc_row other_classes">
    <div class="testm_boxes2 other_classes">
      content
    </div>
  </div>
</div>

To optimize your layout, it's recommended to move the .testm_boxesX class to the .vc_row container. 

<div class="wpb_wrapper">
  <div class="vc_row testm_boxes1 other_classes">
    <div class="other_classes">
      content
    </div>
  </div>
  <div class="vc_row testm_boxes2 other_classes">
    <div class="other_classes">
      content
    </div>
  </div>
</div>

This adjustment allows the two containers to be positioned next to each other seamlessly.

To align the content properly, utilize CSS properties like float:left and float:right, ensuring to specify a width for the floated items.

Add width: 50%; to both .testm_boxes1 and .testm_boxes2 within your CSS stylesheet.

You can view the updated code in action on jsfiddle: http://jsfiddle.net/r7yk8ao8/

Answer №2

To align the two elements side by side, you can use a single style setting that restricts the maximum width of each element to less than half the screen's width, as shown below:

max-width: 49%;

Here is an illustration of this solution:

.testm_boxes1 {
  text-align: center;
  float: right !important;
  max-width: 49%;
}

.testm_boxes2 {
  text-align: center;
  float: left !important;
  max-width: 49%;
}
<div class="wpb_wrapper">
  <h3 style="font-size: 30px;text-align: center;font-family:Roboto;font-weight:700;font-style:normal" class="vc_custom_heading vc_custom_1509530836762">Wat zeggen anderen?</h3>
  <div class="vc_row wpb_row vc_inner vc_row-fluid">
    <div class="testm_boxes1 wpb_column vc_column_container vc_col-sm-6">
      <div class="vc_column-inner ">
        <div class="wpb_wrapper">
          <div class="ult-just-icon-wrapper  ">
            <div class="align-icon" style="text-align:center;">
              <div class="aio-icon circle " style="color:#383785;background:#51b6ea;font-size:20px;display:inline-block;">
                <i class="Defaults-quote-left"></i>
              </div>
            </div>
          </div>
          <div class="wpb_text_column wpb_content_element ">
            <div class="wpb_wrapper">
              <div id="Content">
                <div class="boxed">
                  <div id="lipsum">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Phasellus sapien orci, varius vel accumsan ac,<br> varius eu nisl. Ut in mauris elementum, facilisis ex ac, tincidunt erat.</p>
                    <blockquote>
                      <p>
                        <em>-John Doe</em>
                      </p>
                    </blockquote>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="vc_row wpb_row vc_inner vc_row-fluid">
    <div class="testm_boxes2 wpb_column vc_column_container vc_col-sm-6">
      <div class="vc_column-inner ">
        <div class="wpb_wrapper">
          <div class="ult-just-icon-wrapper  ">
            <div class="align-icon" style="text-align:center;">
              <div class="aio-icon circle " style="color:#383785;background:#51b6ea;font-size:20px;display:inline-block;">
                <i class="Defaults-quote-left"></i>
              </div>
            </div>
          </div>
          <div class="wpb_text_column wpb_content_element ">
            <div class="wpb_wrapper">
              <div id="Content">
                <div class="boxed">
                  <div id="lipsum">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Phasellus sapien orci, varius vel accumsan ac,<br> varius eu nisl. Ut in mauris elementum, facilisis ex ac, tincidunt erat.</p>
                    <blockquote>
                      <p>
                        <em>-John Doe</em>
                      </p>
                    </blockquote>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhancing imported models in Three.js with antialiasing

When I import an OBJ model into my scene, it appears jagged and lacks smoothness. This is puzzling to me because when opened in Blender, the model looks perfectly smooth. On the other hand, the built-in geometries such as new THREE.SphereGeometry(4, 20, 2 ...

javascripthtmlthree.js

Preventing Adjacent Text from Moving Due to a Floated i Element

I have a div with a bootstrap icon positioned at the top right corner. However, I want to center the text horizontally without shifting the position of the icon. Is there a way to achieve this? See my sample code here: https://jsfiddle.net/x1Lvyu6t/3/ ...

htmlcss

Firefox users may notice that the pop-up video player appears in unusual locations on their screen

I'm encountering an issue with a pop-up video player that is triggered by an "onClick" event in HTML elements. The problem arises when there are multiple video players on the same page - in Firefox, the first video loads at the bottom of the page, req ...

javascriptcsspopup

What could be causing my CSS navigation toggle button to malfunction?

My attempt at creating a toggle button for tablets and phones seems to be failing. Despite the javascript class being triggered when I click the toggle button, it is not functioning as expected... https://i.stack.imgur.com/j5BN8.png https://i.stack.imgur. ...

javascripthtmlcss

Update the CSS styling of a parent div based on the active state of specific child divs

I have a class with 4 distinct columns. div class="mainContent"> <div class="left-Col-1" *ngIf="data-1"> </div> <div class="left-Col-2" *ngIf="!data-1"> ...

javascripthtmlcssangulartypescript

Toggling Bootstrap Tooltip divs within a nested structure triggers the Tooltip of the parent div

I have a setup with 2 nested <div> elements, both utilizing the tooltip() function. When I hover over the inner <div>, the tooltip of the outer <div> also displays. To resolve this issue, I attempted to clear the title of the inner <di ...

csstwitter-bootstraptooltip

Using App Storage on Windows Phone 8 with HTML5

Exploring storage options for my html5 app compatible with both windows 8 and windows phone 8. Considering: Local Storage IndexDB Looking for advice on the best storage mechanism to use. Is IndexDB compatible with windows phone 8? Any insights on quota ...

htmlwindows-8windows-phone-8

Creating a Mondrian-inspired design using a combination of red, blue, and yellow within an HTML table

Is there anyone who can assist me in recreating this painting using HTML <table> tag and CSS within a browser? The image to replicate: https://i.stack.imgur.com/84y4I.jpg I attempted to complete this task, but my instructor is dissatisfied with th ...

htmlcss

How come the width of an element with a relative position remains maximized even when it does not have any child elements?

I am facing an issue with a "message" element that needs to be resized if the text exceeds its width within certain limits, similar to how it works in messaging applications. .message { position: relative; color: white; background: #182533 ...

htmlcss

Error: myFunction has not been declared

Can anyone figure out what's going on here? http://jsfiddle.net/sVT54/ <button onclick="myFunction()">Click me</button> <p id="demo"></p> function myFunction() { document.getElementById("demo").innerHTML="Hello World"; } ...

javascripthtml

Display items inside containers using angularjs ng repeat and bootstrap styles, however, the layout is not being rendered correctly

I am struggling to display products in boxes on my ecommerce website, similar to how they appear on other platforms. Although I am utilizing AngularJS ng-repeat and bootstrap classes, the layout of the products is not coming out as intended. Take a look ...

cssangularjsbootstrap-ui

Is there a way to prevent the imported JQuery from causing issues with current code implementations?

Being a novice developer in Html/Javascript/CSS/Jquery coding, I recently encountered an issue while integrating Jquery into my project. When I imported Jquery, the styling of simple buttons went haywire. Jquery worked perfectly fine when using its classes ...

javascriptjqueryhtmlcss

Deletion of a custom function in JavaScript

I have written some basic code to generate and remove an image using functions. Specifically, I need help with removing the image created by the function Generate() when a button linked to the function Reset1() is clicked. Here's the code snippet for ...

javascripthtmlcss

I need to condense my layout from three columns to just two columns in HTML

The html code for "Date Accessed" is meant to be in one column as a header, while the actual dates should be in another column, but somehow they are all appearing in a single column. I am having trouble figuring out why. <!DOCTYPE html> {% load stati ...

htmlcss

Tips for preventing Bootstrap 4 from automatically adjusting the height of all columns equally

I am receiving text from a loop that I am formatting into lists inside columns. I am attempting to float all my columns one behind the other without any space, but Bootstrap is applying the same height to all of them. Here is an example of what it currentl ...

htmlbootstrap-4

using css to pass arguments

I need help with a code that I have, here's the structure: <div className="site-col-1"> content 1 </div> <div className="site-col-2"> content 2 </div> Here is how the corresponding CSS file looks... .s ...

htmlcssreactjssass

Apply the `text-overflow: ellipsis` property to truncate the text of two items within a flex column, which is contained within

I am attempting to accomplish the following: https://i.sstatic.net/H0pB0.jpg Successfully implementing ellipsis for a single item is achieved with: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; However, my challenge lies in truncating ...

css

I'm struggling to locate the space that should be between these elements

After accidentally starting in quirks mode without declaring a doctype, I realized my mistake and corrected it by declaring a doctype. However, there is a persistent issue with a space between .car-box-img and car-box that I can't seem to locate in t ...

htmlcss

What is the best way to transfer information between two views in Aurelia?

I have two different perspectives, one called logo and the other called folder. The logo view should display something from the folder view if the folder is empty. logo.html <template> <require from="company-assets/folders"></require> ...

javascripthtmlaurelia

Color-coding HTML table cells depending on the SQL flag value

After successfully constructing a SQL query that incorporates three conditions from my database table and sets a flag based on them, I have made progress in my project. The query looks like this: UPDATE staging SET `miuFlag` =1 WHERE `lowSideMIUNumAr ...

phphtmlcssmysql