display inline problem

[LeonLatex]

I've lost my way, and now I can't find the right solution again. I've managed to do this before, but now I can't find the right combination.
I have 1 DIV that contains two other DIVs. One is on the left side, and one is on the right side. The right side is the google translate drop down menu. The right one is a div that contains the logo and company name. The problem is that the DIV for the google translate dropdown menu stays at the top, while the DIV for the logo is placed on the line below.

Which "display: inline" option should I go for each individual DIV when i want them aligned left and right on the same line?

Edited March 28, 2023 by LeonLatex

[Strider64]

.outer-div {
  width: 100%;
  text-align: center;
}

.logo-div,
.translate-div {
  display: inline-block;
  vertical-align: middle;
}

.logo-div {
  background-color: red;
  color: #fff;
  text-align: left;
  padding: 1.25em;
  margin: 0.625em;
}

.translate-div {
  background-color: blue;
  color: #fff;
  text-align: right;
  padding: 1.25em;
  margin: 0.625em;    
}

<div class="outer-div">
  <div class="logo-div">Logo and company name</div>
  <div class="translate-div">Google translate dropdown menu</div>
</div>

https://codepen.io/Strider64/pen/ZEMZQwa

[maxxd]

Save yourself the time and trouble and use either flex or grid. It'll make your life much easier.

[gizmola]

5 minutes ago, maxxd said:

Save yourself the time and trouble and use either flex or grid. It'll make your life much easier.

^^^^^^^^^^^^^^^^^^^^^^^

100%

This video is highly recommended.  Try out some of the simple code he shows, and you should be able to figure out how to make it apply to your desired layout.  The video does a great job describing which use cases are better suited to a particular layout.

 

[LeonLatex]

Thanks to all of you. I will look into it and all the advice you are giving me. There has been a downtime of about 10 hours on the server, and I didn't have a copy on this site locally, so I haven't been able to work on the site. Again, thank you so much 😊

Edited March 29, 2023 by LeonLatex

[LeonLatex]

13 hours ago, Strider64 said:

.outer-div {
  width: 100%;
  text-align: center;
}

.logo-div,
.translate-div {
  display: inline-block;
  vertical-align: middle;
}

.logo-div {
  background-color: red;
  color: #fff;
  text-align: left;
  padding: 1.25em;
  margin: 0.625em;
}

.translate-div {
  background-color: blue;
  color: #fff;
  text-align: right;
  padding: 1.25em;
  margin: 0.625em;    
}

<div class="outer-div">
  <div class="logo-div">Logo and company name</div>
  <div class="translate-div">Google translate dropdown menu</div>
</div>

https://codepen.io/Strider64/pen/ZEMZQwa

Strider, can you please tell me why you set up block 2 and 3 like this? :

.logo-div,
.translate-div {
  display: inline-block;
  vertical-align: middle;
}

.logo-div {
  background-color: red;
  color: #fff;
  text-align: left;

Both blocks have a reference to "logo-div". Why?
I ask before I try because I want to understand what I am doing when doing it.

Will the result not be determined by what is written in block 3 regardless of what is written in block 2 because block 3 is read after block 2? I mean: Therefore, the values for. logo-div in block 2 are overridden by the values of block 3 for ". logo-div" no matter what. I'm just asking because I got a little confused now. I have never set up CSS like this before, and I didn't know you could do it this way. Therefore, I need an explanation.

[kicken]

The code is the same as if one wrote

.translate-div {
  display: inline-block;
  vertical-align: middle;
}

.logo-div {
  display: inline-block;
  vertical-align: middle;
  background-color: red;
  color: #fff;
  text-align: left;
}

Since both .logo-div and .translate-div have the same display and vertical-align styles, they were combined into a single block.  The second block then has the styles that apply only to .logo-div.

2 hours ago, LeonLatex said:

Therefore, the values for. logo-div in block 2 are overridden by the values of block 3

If block 3 specified the same property as block 2, then yes the block 3 value would be applied.  Since both blocks specify different properties, there is no overriding necessary.

 

[LeonLatex]

Yes, of course. I was thinking that block 3 would overwrite the values in block 3 since it is read later, but now I see that there is different values in those two blocks.

So, the case is closed. Thanks 😊

[LeonLatex]

Edt:

I was thinking that block 3 would overwrite the values in block 2 since it is read later,