Cant get 2 divs next to each other but on different sides of the page

Question

I cant get 2 divs on the same line but one is aligned right.

.container>* {
  display: inline-block;
  background-color: rgba(0, 0, 0, .85);
}

.menulinks {
  font-size: 50px;
  padding-top: 0px;
  padding-left: 10px;
  text-decoration: none;
  color: blueviolet;
  float: left;
}

.menulinks:hover {
  color: coral;
}

<div class="container">
  <div>
    <img src="assets/logo.png" width="150">
  </div>

  <div align="right">
    <a href="photos.html" class="menulinks">Photos</a>
    <a href="about.html" class="menulinks">About</a>
    <a href="socials.html" class="menulinks">Socials</a>
  </div>
</div>

It was working before when I had tables and stuff but I thought this would be easier. They are on the same line but the links just won't align to the right,

score 0 · Answer 1 · answered Sep 15 '19 at 19:11

Since there are only two divs you could use display: flex and the attribute justify-content: space-between to put all of the extra space between the only two divs.

.container  {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(0, 0, 0, .85);
}

.menulinks {
  font-size: 50px;
  padding-top: 0px;
  padding-left: 10px;
  text-decoration: none;
  color: blueviolet;
  float: left;
}

.menulinks:hover {
  color: coral;
}

<div class="container">
  <div>
    <img src="https://placekitten.com/500/500" width="150">
  </div>

  <div align="right">
    <a href="photos.html" class="menulinks">Photos</a>
    <a href="about.html" class="menulinks">About</a>
    <a href="socials.html" class="menulinks">Socials</a>
  </div>
</div>

score 0 · Answer 2 · edited Sep 16 '19 at 07:06

Firstly, I highly recommend removing your general * selector. It is best to be specific when targeting elements.

I would assign specific class names to your div's. I chose item in my example below.
align="right" does not work on non-table elements. That is why this is no longer working.
Use flexbox! I've added two lines of flexbox code in your container class.

    .container {
        display: flex;
        justify-content: space-between;
    }
    
    .item {
        background-color: rgba(0, 0, 0, .85);
    }
    
    .menulinks{
        font-size: 50px;
        padding-top: 0px;
        padding-left: 10px;
        text-decoration: none;
        color: blueviolet;
        float: left;
    }
    
    .menulinks:hover{
        color: coral;
    }

    <div class="container">
        <div class="item">
            <img src="assets/logo.png" width="150">
        </div>
    
        <div class="item">
            <a href="photos.html" class="menulinks">Photos</a>
            <a href="about.html" class="menulinks">About</a>
            <a href="socials.html" class="menulinks">Socials</a>
        </div>
    </div>

score 0 · Answer 3 · answered Sep 16 '19 at 05:51

Different approach with minor adjustment to your existing code is to use float:right property to the links. Worth to mention that the attribute "align" deprecated and all layout design need to be from the style sheet.

What i did is to change the align="right" to class="right" and then added on the style sheet .right {float: right;}.

Note: since you giving your links a 50px font-size, on small screen this will span 2 lines. In order to fix this you can add @media queries

Note(2): On the break point, i changed a little the .menulinks with font-size: 25px; display: block; float: none; So your code can look something like that:

.container > * {
  display: inline-block;
  background-color: rgba(0, 0, 0, .85);
}

.menulinks {
  font-size: 50px;
  padding-top: 0px;
  padding-left: 10px;
  text-decoration: none;
  color: blueviolet;
  float: left;
}

.menulinks:hover {
  color: coral;
}
/* added: */
.right {float: right;}
@media (max-height: 480px) { 
  .menulinks {font-size: 25px; display: block; float: none;} 
}

<div class="container">
  <div>
    <img src="assets/logo.png" width="150">
  </div>

  <div class="right"> <!-- change from align="right" that deprecated -->
    <a href="photos.html" class="menulinks">Photos</a>
    <a href="about.html" class="menulinks">About</a>
    <a href="socials.html" class="menulinks">Socials</a>
  </div>
</div>

score 0 · Accepted Answer · answered Sep 16 '19 at 07:15

The other answers are good in specifying that you can achieve this with flexbox.

My answer shows another flexbox approach. If you define margin-left: auto on the most right element it will always be on the right, even if you have another element right next to the logo, see the added example content.

So my answer is not better than the other ones, it just shows a different way to solve your problem. Depending on if you need more elements in a row or not, chose this approach.

.container>* {
  display: inline-block;
  background-color: rgba(0, 0, 0, .85);
}

.menulinks {
  font-size: 50px;
  padding-top: 0px;
  padding-left: 10px;
  text-decoration: none;
  color: blueviolet;
  float: left;
}

.menulinks:hover {
  color: coral;
}


/*Added CSS*/

.container {
  display: flex
}

.right {
  margin-left: auto;
}

<div class="container">
  <div>
    <img src="assets/logo.png" width="150">
  </div>
 <div style="width: 100px; color: white">
   The links are on the right even if here would be another container (with a Slogan, or some other content) 
 </div>

  <div class="right">
    <a href="photos.html" class="menulinks">Photos</a>
    <a href="about.html" class="menulinks">About</a>
    <a href="socials.html" class="menulinks">Socials</a>
  </div>
</div>

Cant get 2 divs next to each other but on different sides of the page

4 Answers4