Aligning Navigation to the right/ CSS problem

Good day,
I have the problem which I tried to fix on my own, but I can’t find the solution how to make it happen.
So the thing is, I want my navigation links to be assigned to the right side,but the company name to the left. And I can’t find the way, on how to do that. Tried a lot of ways of doing it. But none Is working. Anyone can help. Here is the code.

Thank you very much, Cheers!

1 Like

Hi there, please have you tried floating them to the left and right?
like

nav {
float: right;
}
companylogo {
float: left;
}

Yes, I have tried that. As default, they all are alligned to the left side, tried float “nav” to the right, but it’s not happening. Just stay at the place.

1 Like

Some of the css properties didnt seem right…
but i work on it and try this…

#nav-bar .navi  .nav-link li {
  float: left;
  padding: 10px;
  margin: -5px 0px 0px 30px;
}

make sure your width are of right size when you float… i have sent you additional message…
thanks.

Try using flexbox, it makes it easy for you

Make sure when you float child elements, you have to float the parent container too and should give it a full width or else the parent container will get displaced from the layout, that’s the reason flexbox is used widely.

Refer this pen, i have adjusted using flexbox

You can refer this article for flexbox, it will reduce a lot of pain moving the elements

2 Likes

You are the God Sujith3021!!! This is what I wanted, I played with Flex box, but couldn’t manage to get it done. Now I see how it is done. So when I give property of Width 30% to Links, the browser understand automatically, that Links Div takes 30% of that Line and rest 70% goes to the “Company Name” and manipulates “Links” in those 30%.Got it.
One question. For “Justify-content” I can give only one property or ?

1 Like

Cheers man… :wink:

I couldn’t get you…

1 Like

I mean :
justify-content: space between, flex-end ;
can I use two properties together or only 1 can used at the same time?

1 Like

No in that case you can wrap the parent as flex for example,

<div class="parent">
   <div class="child">
        element 1...element n..
   </div>
</div>

Here you want the parent to be flex-end so give the container that wraps the parent as flex and apply flex-end for justify content

And to the child you make it as flex and give it space-between, this is how we use flex

We can’t use multiple values for a single props in flex (x, y) => (justify-content, align-items) based on the flex-direction

1 Like

Oh,ok got it, Thank you.

1 Like

Hello there… hope all is well here please…?