Aligning Navigation to the right/ CSS problem

HTML-CSS
1

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
2

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

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

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
4

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.

5

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
6

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
7

Cheers man… :wink:

I couldn’t get you…

1 Like
8

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
9

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
10

Oh,ok got it, Thank you.

1 Like
11

Hello there… hope all is well here please…?