Align two divs on the same line without modifying the HTML

Question

What is the best way to align these two div on the same line?

<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 I have Title A on top of Title B from top to bottom looking at the page.

My goal is to have Title A and Title B aligned together on the same line without using HTML and without moving the structure of main_three and main_four.

Based on the way things I structured, I can only use css to achieve that goal.

Any help would be much appreciated.

Chris Medina · Accepted Answer · 2020-05-09T23:58:51.650

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>

edited May 09 '20 at 23:58

answered May 09 '20 at 22:51

Chris Medina

338
1
10

Thank you Chris. You solution worked but i forgot to include two other divs. basically what happened is that i changed it the way u suggested and `div main_three` and `div main_four` are jeopardized now. I have updated my post above....`main three` and `main_four` should not move. I would love to hear from you – John D May 09 '20 at 23:12
You can do clear:both; when using main_three. I'll put answer in code above. – Chris Medina May 09 '20 at 23:17
hum apparently `clear:both` is not the solution. those two divs are not properly aligned anymore. it may be because of the different css used here i cant copy/paste them because its long. – John D May 09 '20 at 23:44
John, I did a screenshot to show you how it's aligning in a fresh html doc for me. Nothing pretty but A & B are side by side and on a new line C & D are below A & B , C & D are side by side as well. Maybe try incognito mode in Chrome to make sure it's not caching anything when using the clear:both; – Chris Medina May 09 '20 at 23:51
Yes I can see the screenshot....so the problem is the structure of the css here, I will figure it out. Thank you for the help. – John D May 09 '20 at 23:53
Thanks John. I removed some spacing above to not make the code so long. Hope you get any glitchyness sorted! – Chris Medina May 10 '20 at 00:00

drinking-code · Answer 2 · 2020-05-11T09:06:28.650

1

If you have no other child in the parent of the 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>

you can use Flexbox

body {
  display: flex;
}

EDIT:

To align only two of the four boxes in the same line I think inline would be the correct choice:

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

edited May 11 '20 at 09:06

answered May 09 '20 at 22:55

drinking-code

140
1
8

Thank you for the feedback I forgot to mention the two other `divs`, I have updated my post above....`main three` and `main_four` should not move. please let me know your thoughts. – John D May 09 '20 at 23:14
`flex` is already applied to that `div container` that u refer to as body in the codebase but it wont work. – John D May 09 '20 at 23:16

score 1 · Answer 3 · answered May 09 '20 at 23:03

1

As the other answers point out, flex on the body works fine, or floats.

Or you can use 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>

answered May 09 '20 at 23:03

disinfor

10,865
2
33
44

Thank you for the feedback I forgot to mention the two other `divs`, I have updated my post above....`main three` and `main_four` should not move. please let me know your thoughts. – John D May 09 '20 at 23:13
This would still work even if you have the third and four divs, since those will automatically be block level elements. – disinfor May 10 '20 at 01:15

QmlnR2F5 · Answer 4 · 2020-05-09T23:21:46.760

0

One way would be to set the display property to inline like this

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

or even shorter and more creative, like this, this will inline everything though.

body * {
  display: inline;
}

EDIT: The stuff below are no longer the case.

As a side note - you are missing the closing square bracket tag on 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>

edited May 09 '20 at 23:21

answered May 09 '20 at 22:58

QmlnR2F5

934
10
17

Thank you for the feedback I forgot to mention the two other `divs`, I have updated my post above....`main three` and `main_four` should not move. please let me know your thoughts. – John D May 09 '20 at 23:14
I updated my answer. As an another side note, you are now missing a closing div for this div :) ``
``
– QmlnR2F5 May 09 '20 at 23:22

Align two divs on the same line without modifying the HTML

4 Answers4

EDIT: