Jump to content

display inline problem


LeonLatex
Go to solution Solved by Strider64,

Recommended Posts

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 by LeonLatex
Link to comment
Share on other sites

  • Solution
.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

Link to comment
Share on other sites

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.

 

  • Thanks 1
Link to comment
Share on other sites

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 by LeonLatex
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

  • Thanks 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.