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:

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

Steps for adding hover color to a div with linear gradient border

My current challenge involves adding a hover color to a specific div, but I'm facing obstacles due to the gradient background that was implemented to achieve border-radius functionality. This task is being carried out within a React Component using c ...

javascripthtmlcssreactjs

Using CSS within the HTML code is effective, however, linking to an external CSS file is not working

I require assistance. This situation is absolutely absurd. Currently, I am utilizing Komodo IDE version 7.1.2 and Firefox version 15.0.1. The HTML5 file that I created looks like this: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

csshtmlfirefoxstylesheet

Achieving perfect alignment for a div that can adapt to different sizes and

Struggling with my CSS skills, I have spent countless hours trying to center a fixed/dynamic size div. The setup involves multiple images within a 100x100 size frame. Upon clicking on an image (thanks to jQuery), #fade is triggered to reveal a window showc ...

jquerycss

The art of fluidly positioning elements in Bootstrap columns

My goal is to showcase objects in 3 columns using Bootstrap 4. However, when I implement the code provided, the objects are only displayed in a single column, as shown here: example of 1 column layout. What I actually want is for the objects to be arrange ...

cssangularjstwitter-bootstrapbootstrap-4

Quick method to assign child iframe title as index.html <title>title</title>

Is there a simple method to dynamically update the <title> of my index.html based on the <title> of a child iframe? Take a look at my website for reference If the content within the iframe changes, will the title automatically update along wi ...

javascriptjqueryhtmliframetitle

Successfully launched Laravel application, experiencing issues with all pages except for the homepage

I recently completed a website for a client and everything seems to be working fine locally. Unfortunately, when trying to access any links on the site, I am getting a 500 server error. The hosting is with 1and1, and I've heard mixed reviews about it ...

htmllaravel.htaccessproduction-environment

What could be preventing the background image from displaying properly?

I had the idea to create a game where players have to flip cards to reveal what's on the back, but I'm struggling to get the background image to display properly. As a newcomer to Vue, I'm not sure if I made a mistake somewhere. My intuition ...

javascripthtmlcssvue.js

Challenges encountered with input outcomes

I am facing an issue with input results. I have a button that triggers a function to check for empty input fields. However, when I click the button, it always falls into the last if statement and displays as if the fields are not empty. I have already att ...

javascripthtml

What is the most efficient way to dynamically alter the position of a div element within an HTML document using

In a scenario where a parent div contains multiple child divs, it is required that one particular child div named .div_object_last always stays at the end. Below is an example setup : HTML <div class="div_parent"> <div class="div_object"> ...

javascriptjqueryhtml

Tips for aligning an icon in the middle of the Bootstrap 3 grid vertically

Struggling with vertical centering an icon at the end of a list item. The goal is to vertically center the right arrow on the page. Using Bootstrap 3, Angular-UI bootstrap JS, and AngularJS. Current code snippet: <style> .center { display: in ...

htmlcsstwitter-bootstrap

What is the proper way to format lengthy lines in Twig templates while adhering to coding standards?

In my templates, I have the following code snippet for generating routes with parameters: <a class="btn btn-block btn-abcd" href="{{ path( 'auth.login', { 'type': constant('User::TYPE_CANDIDATE'), & ...

phphtmlsymfonycoding-styletwig

Can a single character within a span be located and customized using only CSS techniques?

My inquisitive mind believes that the answer lies in the negative, however, CSS3 pseudo-selectors have the ability to work their magic almost like performing illusions on a stage. In an absurd context, I am determined to locate and style the period charac ...

csscss-selectors

What technique works best for changing the visibility of an image without causing other elements to shift position?

On my webpage, I have a table cell with an image that should only display when hovering over the cell. The problem is that when the image is shown, it shifts the other text to the left because its default state is "display:none". I'm searching for a s ...

jquerycsshovertoggle

Navigational tabs have been implemented in multiple independent sets, eliminating the need for multiple scripts to manage hiding content on click events

In a previous inquiry, I sought guidance on achieving a specific tab functionality like the one depicted below: https://i.stack.imgur.com/s2Gm8.png The query led to an insightful suggestion from @BradleyCoupland, who provided the following code snippet: ...

htmltwitter-bootstrap

Spinning html/css content using JavaScript

Greetings! I am currently working on a demo site using just HTML, CSS, and JavaScript. Typically, I would use Ruby and render partials to handle this issue, but I wanted to challenge myself with JavaScript practice. So far, I have created a code block that ...

javascripthtmlcss

Tips for automatically inserting a "read more" link once text exceeds a certain character count

Currently utilizing an open-source code to fetch Google reviews, but facing an issue with long reviews. They are messing up the layout of my site. I need to limit the characters displayed for each review and provide an option for users to read the full rev ...

javascriptjqueryhtmlcss

Determine if offcanvas element is visible upon initialization in Bootstrap 5 Offcanvas

I have a search-filter offcanvas div for location and property type on this webpage: On larger screens (desktop), the offcanvas is always visible, but on smaller screens (mobile), it is hidden and can be toggled with a button. This functionality works per ...

javascripthtmlbootstrap-5

What is the inability to place a div that is 30% wide alongside another div that is 70% wide, and keep them in a horizontal line?

If I make a div that is 30% wide, and another div that is 70% wide, they do not align horizontally. To fix this, I need to ensure that the combined widths of the two divs are less than 100%. Here's an example of how it can be done: <div id="wrapp ...

htmlcss

Transitioning with an ellipsis

Currently, I am working on a project where I am trying to utilize the CSS property text-overflow: ellipsis to achieve a specific animation. However, despite applying this property along with white-space: nowrap and overflow: hidden to .card-dish__info, I a ...

htmlcssoverflowellipsis

Experience the ultimate entertainment with Flowplayer by watching multiple videos simultaneously in two separate views

I have two separate players in two different views within the DOM. Each player retrieves a video file asynchronously from my database using a unique ID. The first player functions correctly, but I am uncertain how to replicate this for ...

jqueryajaxhtmlflowplayer