Floating elements to right side - html

Question

<nav class="navbar">
<ul class="navbar__list">
<li class="navbar__brand">
<img src="imgs/logo.webp" alt="logo" class="navbar__brand--logo" />
</li>
<li class="navbar__item">
<a class="navbar__link" href="#">Home</a>
</li>
<li class="navbar__item">
<a class="navbar__link" href="#">About</a>
</li>
<li class="navbar__item">
<a class="navbar__link" href="#">Performance</a>
</li>
<li class="navbar__item">
<a class="navbar__link" href="#">Get started</a>
</li>
<li class="navbar__item">
<a class="navbar__link" href="#">News</a>
</li>
<li class="navbar__item">
<a class="navbar__link" href="#">Contact</a>
</li>
<div class="navbar__buttons">
<li class="navbar__item">
<a class="navbar__link" href="#">Sign up</a>
</li>
<li class="navbar__item">
<a class="navbar__link" href="#">Login</a>
</li>
</div>
</ul>
</nav>
In the above code , I want the div with the class navbar__buttons to be floated to the right side and aligned vertically with the other navbar__item items .
what I already Have :
here is my css
width: 100%;
&__item {
display: inline-block;
font-weight: 700;
transform: translateY(-1rem);
&:not(:last-child) {
margin-right: 2rem;
}
}
&__brand {
display: inline-block;
margin-right: 2rem;
width: 14rem;
&--logo {
width: 100%;
}
}
&__buttons {
display: inline-block;
float: right;
}
I want the div with class navbar__buttons to be floated right and in the same row as the rest of the navbar items
Note : I'm using css/scss

Answer 1

Flexbox
ul {
list-style-type: none;
display: flex;
}
li {
padding: .25em;
}
li:nth-last-child(2) {
margin-left: auto;
}
<nav class="navbar">
<ul class="navbar__list">
<li class="navbar__brand">
<img src="imgs/logo.webp" alt="logo" class="navbar__brand--logo" />
</li>
<li class="navbar__item">
<a class="navbar__link" href="#">Home</a>
</li>
<li class="navbar__item">
<a class="navbar__link" href="#">About</a>
</li>
<li class="navbar__item">
<a class="navbar__link" href="#">Performance</a>
</li>
<li class="navbar__item">
<a class="navbar__link" href="#">Get started</a>
</li>
<li class="navbar__item">
<a class="navbar__link" href="#">News</a>
</li>
<li class="navbar__item">
<a class="navbar__link" href="#">Contact</a>
</li>
<li class="navbar__item">
<a class="navbar__link" href="#">Sign up</a>
</li>
<li class="navbar__item">
<a class="navbar__link" href="#">Login</a>
</li>
</ul>
</nav>

Answer 2

You can achieve the layout you're looking for using flex CSS properties on your elements.
First, I'd tweak your HTML slightly by moving navbar__buttons outside of navbar__list:
<nav class="navbar">
<ul class="navbar__list">
<li class="navbar__brand">
<img src="http://placekitten.com/200/100" alt="logo" class="navbar__brand--logo" />
</li>
<li class="navbar__item">
<a class="navbar__link" href="#">Home</a>
</li>
<li class="navbar__item">
<a class="navbar__link" href="#">About</a>
</li>
<li class="navbar__item">
<a class="navbar__link" href="#">Performance</a>
</li>
<li class="navbar__item">
<a class="navbar__link" href="#">Get started</a>
</li>
<li class="navbar__item">
<a class="navbar__link" href="#">News</a>
</li>
<li class="navbar__item">
<a class="navbar__link" href="#">Contact</a>
</li>
</ul>
<ul class="navbar__buttons">
<li class="navbar__item">
<a class="navbar__link" href="#">Sign up</a>
</li>
<li class="navbar__item">
<a class="navbar__link" href="#">Login</a>
</li>
</ul>
</nav>
This will allow you to utilize the flex properties as I outline below.
Displaying your navbar as flex allows you to utilize justify-content: space-between;, which essentially distributes the navbar's children evenly on the line, with the first element on the left and the last element on the right, thus pushing your navbar__buttons to the right side:
.navbar {
width: 100%;
display: flex;
justify-content: space-between;
}
From there, your navbar__buttons links would be aligned to the top (aka not aligned with your other nav links). So, you need to also add a few flex properties to your navbar__buttons:
.navbar__buttons {
display: flex;
align-items: flex-end;
}
Displaying navbar_buttons as flex allows you to use align-items: flex-end;, which aligns it's children to the bottom of the container, aligning them with the rest of your nav links.
Here's a working codepen example based on your code: https://codepen.io/mmshr/pen/eaOWPW