Arrange a pair of div containers side by side on the webpage without the need to alter the existing

Is there a way to align these two div side by side?

<div class="main_one">
  <div class="number_one">Title A</div>
</div>
<div class="main_two">
  <div class="number_two">Title B</div>
</div>
<div class="main_three">
  <div class="number_three">Title C</div>
</div>
<div class="main_four">
  <div class="number_four">Title D</div>
</div>

Currently, Title A and Title B are displayed one on top of the other.

I would like to have them appear next to each other without altering the structure of main_three and main_four. This alignment must be achieved using only CSS, with no changes made to the HTML code.

Your suggestions on how to achieve this would be greatly appreciated.

cssangularjsreactjstwitter-bootstrapsass

Answer №1

<div class="main_one">
    <div class="number one">Title A</div>
</div>
<div class="main_two">
    <div class="number two">Title B</div>
</div>

<div class="main_three">
    <div class="number one">Title C</div>
</div>
<div class="main_four">
    <div class="number two">Title D</div>
</div>

<style type="text/css">
    .main_one{
        float:left;
    }

    .main_two{
        float:left;
    }

    .main_three{
        clear:both;
        float:left;
    }

    .main_four{
        float:left;
    }
</style>

https://i.sstatic.net/ysGBM.png

Answer №2

It has been mentioned in other responses that using flex on the body or floats can work well.

Another option is to utilize inline-block

.main_one,
.main_two {
  display: inline-block;
}
  <div class="main_one">
    <div class="number one">Title A</div>
  </div>
  <div class="main_two">
    <div class="number two">Title B</div>
  </div>

Answer №3

If you find yourself with just one child in the parent of two:

<body>
  <div class="main_one">
    <div class="number one">Title A</div>
  </div>
  <div class="main_two">
    <div class="number two">Title B</div>
  </div>
</body>

Consider using Flexbox

body {
  display: flex;
}

UPDATE:

To have only two of the four boxes aligned on the same line, I suggest using the property inline:

.main_one, .main_two {
  display: inline; /* or */
  display: inline-block
}

Answer №4

To achieve this effect, one method is to change the display property to inline as demonstrated below:

.main_one, .main_two,
.number_one, .number_two {
  display: inline;
}

For a more concise and imaginative solution, you could utilize the following CSS code which will set everything to display inline:

body * {
  display: inline;
}

UPDATE: The information below is no longer applicable.

Additionally, please note that there is a missing closing square bracket tag in one of the divs:

<div class="main_one">
  <div class="number one">Title A</div>
</div>
<div class="main_two">
  <div class="number two">Title B</div <------------ HERE
</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

Concealing HTML content with a modal overlay

There are security concerns with my authentication overlay modal, especially for users familiar with CSS and HTML. Is there a way to hide the HTML behind the modal so it doesn't appear in the page source? The code below is just an example of a modal ...

javascriptjqueryhtmlcss

Managing form submissions using Jquery and checkboxes

Whenever I submit my dynamically created form, all checkboxes briefly become selected for a split second. Does anyone have an explanation for this behavior? Is it common or is there something wrong with my code? Although the form submits correctly, it migh ...

javascriptjqueryhtmlcssforms

Using an AngularJS directive to modify CSS styles

I'm attempting to modify DOM CSS styles using Angular. If the textbox value is set as the height, I have assigned ng-model to the textbox and then ng-style="{height:heightdef}" How can I achieve this using a directive? Fiddle :: http://jsfiddle.n ...

javascriptjqueryangularjs

Tips for confirming that one of three checkboxes has been selected in AngularJS

Here is the code snippet for checkboxes: <input name="chkbx1" type="checkbox" ng-model="LoanReferData.Prop1" ng-class="Submitted?'ng-dirty':''" required>Prop 1</input> <input name="chkbx2" type="checkbox" ng ...

javascriptjqueryangularjsasp.net-mvccheckbox

javascript alter css property display to either visible or hidden

I am struggling with a CSS id that hides visibility and uses display: none. The issue arises when I want the element to be visible upon clicking a button, but removing the display:none property is causing design problems due to it being an invisible elemen ...

javascripthtmlcss

Bringing Together AngularJS and JQuery: Using $(document).ready(function()) in Harmony with Angular Controller

Can you lend me a hand in understanding this? I have an angular controller that is structured like so: angular.module('myApp', []) .controller('ListCtrl', function($scope, $timeout, $http){ // Making API calls for Health List ...

javascriptjqueryangularjsdocument-ready

What is the best way to insert an image from a local folder into the state of my react component?

I have a code snippet here that displays images using item numbers, but I want to replace those with images from my local folders. Can anyone guide me on how to do this? Also, if you know of any good source code for creating product sliders, please share ...

reactjsslidercarousele-commerce

Setting a parent for CSS selectors in Material UI: A step-by-step guide

Currently, I am in the process of developing a Chrome Extension that incorporates Material UI. By using the inject method, the extension is able to apply all of the Material UI styles seamlessly. I have been contemplating the idea of adding a parent selec ...

cssgoogle-chrome-extensionmaterial-uijss

Navigating the Express Router

Currently, I am using Express to manage client requests and I need to set up routes for various pages on my app such as "/about", "/contact", "/listing", and "/product". Instead of writing individual handlers for each route, I am looking for a way to confi ...

node.jsreactjsexpressrouter

Align the dimensions of the table to match with the background image in a proportional

Seeking a contemporary method to match a table with a background image, ensuring all content scales proportionally. Mobile visibility is not a concern for this specific project. Using Wordpress with a starter bootstrap theme. Check out the code on jsfidd ...

htmlcsswordpresstwitter-bootstraphtml-table

I created an image that can be clicked on, but unfortunately it only functions properly on the

I am currently working on creating an image that can be clicked to cycle through different images all within the same frame. While I have managed to get it to work, I am facing a limitation where it only responds to one click. count = 1; function myF ...

javascripthtmlcss

Creating an Angular directive that shares a single scope while displaying multiple behaviors

I am facing a specific scenario with my directive where the refresh scope needs to be either an object or a function. How can I properly assign this to my directive? 1. Initial scenario <!--HTML--> <directive refresh="vm.refresh"> </dir ...

javascriptangularjsangularjs-directiveangularjs-scope

Is there a way to program custom key assignments for my calculator using JavaScript?

As a beginner in the world of coding and JavaScript, I decided to challenge myself by creating a calculator. It's been going smoothly up until this point: My inquiry is centered around incorporating keys into my calculator functionality. Currently, th ...

javascripthtmlcss

Is it possible to bring in the library "next/image" under a different alias?

I am facing a dilemma in one of my components where I require both of the following functionalities: import Image from 'next/image'; (from NextJS) Image() (from TypeScript) Unfortunately, these two are conflicting with each other. Is there an ...

reactjsnext.js

Issues with Angular ng-if and function not functioning as expected

When I modify the "anoini" value in the first code, the "gerar()" function displays the old value. However, once I remove <div ng-if...., it works correctly. Do you have any idea what could be causing this issue? Thank you! // JavaScript Document ...

angularjs

Tips for consolidating all functions into a single file for ReactJS inheritance:

I'm curious about something. In Angular JS, we have the ability to create a global service file that can be inherited by every component. This allows us to use the functions written in the global service file within each respective component. Is ther ...

javascriptreactjsreact-hooks

Transferring the $http.post request to a separate service function

Although I am new to AngularJS, I assure you that I am not stupid. I recently had a call in a controller that I wanted to move to a service in order to make it available to multiple controllers. $http.post("/admin/Leads/LoadLeads.ashx", dataObj) .succ ...

angularjs

The issue with AngularJS failing to update input elements on mobile devices

Within my Angular controller's scope, there is an array and a variable used to traverse this array. $scope.items = [ {Name: 'X'}, {Name: 'Y'}, {Name: 'Z'} ]; $scope.currentItemIdx = 0; $scope.currentItem = $s ...

angularjsinputrefresh

The Angular promise refuses to resolve at my desired time

I am struggling with managing Angular promises in order to control when they resolve. In the code snippet below, my intention is to first retrieve KeyDataFromServer() and then proceed with executing the remaining commands only after all the keys have been ...

javascriptangularjsasynchronousfirebaseangular-promise

Exploring the integration of custom filters in AngularJS for enhanced visualization with Fusion Charts

I've encountered an AngularJS issue with Fusion Charts. I'm struggling to arrange the data according to one of the values in JSON data. The Fusion Chart currently displays mixed-up data, but I aim to filter it based on specific criteria as depict ...

angularjsjsonfusioncharts