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

Question

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.

css angularjs reactjs twitter-bootstrap sass

Answer 1

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>

Answer 2

<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>

Answer 3

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 4

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 5

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 6

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 7

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>

Answer 8

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>

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

Answer №1

Answer №2

Answer №3

UPDATE:

Answer №4

Similar questions

Conceal an element within the initial row of the table

What is the best way to pass card data between Vue.js components?

The issue with two-way binding in nested AngularJS components is unresolved

The Field component in redux-form does not support turning off autocomplete

Error: Attempting to add types to an object returned from the .map function in JSX Element

Experiencing difficulties with arrays in JavaScript while using React Native

React Native: Image display issue

How can I display an alert once an asynchronous function has finished executing in React-Native?

"Retrieving the most recent data within an ng-repeat directive using AngularJS

Dealing with nullable properties in Typescript

Is it possible to nest an HTML <span> inside a label tag in a Rails form_for?

Navigate to a specific section of a webpage with automatic scrolling

Nested navigation in Bootstrap

Enhance the spacing between the UL-LI navigation menu and the currently selected item

What is a clever way to code this Angular HTML using just a single <a> tag?

What is the optimal method for securely storing login credentials (including a "remember me" option) and managing session continuity within an AngularJS application?

Text appears unclear and fuzzy when using Firefox browser

What is the best way to connect an image to a different webpage?

Is $scope.$emit ineffective within a callback function?

Encountering an issue while attempting to transfer information between screens, receiving the error message: TypeError - undefined is not an object when evaluating 'route.params.item'