Float right is not affecting the layout of my navbar

Question

.nav {
  display: flex;
  background: dodgerblue;
  position: sticky;
  top: 0;
}

.links-container {
  display: flex;
  float: right;
}

<header class="nav">
  <h1 class="logo">Learn to code</h1>
  <div class="links-container">
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
  </div>
</header>

I have tried position relative on the link container and that didn't work either.

score 1 · Accepted Answer · answered Feb 23 '21 at 00:31

Floats really aren't the best way to do this anymore. Try flexbox!

* {
margin: none;
padding: none;
box-sizing: border-box;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

header nav {
  display: flex;
}

header nav p {
  margin: 0 10px;
}

<header>
  <h1 class="logo">Learn to code</h1>
  <nav>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
  </nav>
</header>

StackSlave · Answer 2 · 2021-02-23T00:55:49.007

1

Here's what I think you might want to do:

.nav{
  display:flex;
  background:dodgerblue;
  position:sticky;
  top:0;
}
.links-container{
  display:flex;
  flex:1;
  align-items:center;
  justify-content:flex-end;
}

<header class='nav'>
  <h1 class='logo'>Learn to code</h1>
  <div class='links-container'>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
  </div>
</header>

edited Feb 23 '21 at 00:55

answered Feb 23 '21 at 00:42

StackSlave

10,613
2
18
35

1

this worked just changed ```justify-content: end;``` to ```justify-content: flex-end;``` – Joeman Feb 23 '21 at 00:52

score 0 · Answer 3 · answered Feb 23 '21 at 00:36

0

Float properties are ignored in flex containers.

In your case auto margins will be the right fit

.links-container {
  display: flex;
  margin-left: auto;
}

answered Feb 23 '21 at 00:36

ndiecodes

1
2

Float right is not affecting the layout of my navbar

3 Answers3