Not floating right

HTML-CSS
1

Frustrating as hell.

Can someone advise me why this nav bar isn’t floating right like I am asking it to?

HTML:

<body>

    <div id="nav">

        <img id="logo" src="/original_trombones.png" alt="logo">

        <ul id="nav-right">

            <li>Features</li>

            <li>How It Works</li>

            <li>Pricing</li>

        </ul>

    </div>

</body>

CSS:

#nav {

    display: flex;

}

#logo {

    max-width: 400px;

    max-height: 50px;

}

#nav-right {

    float: right;

}

CSS Grid is proving to be my biggest enemy. Or positioning I should say since only flexbox is used.

2

It’s because of the flexbox container. When using flexbox you don’t need to use float anyway.

#nav-right {
  /* float: right; */
  margin-left: auto;
}
2 Likes
3

I believe when you use display flex, any float directives are ignored. Check out this page for some alignment options https://css-tricks.com/snippets/css/a-guide-to-flexbox/

1 Like
4

Thanks guys, REALLY appreciate it!

Now to figure out how to align items vertically without display: flex since this doesn’t work :stuck_out_tongue:

5

align-items: center should work just fine (with flexbox).

It may depend on the height of the elements and their container. If the height of the container is just the height of the tallest element inside the container you won’t really see the centering.

Example code 
#nav {
  display: flex;
  align-items: center;
  /* just so you can see the centering */
  height: 80px;
  background: #00bcd4;
}

#nav li {
  display: block;
  padding: 10px;
}

#logo {
  max-width: 400px;
  max-height: 50px;
}

#nav-right {
  display: flex;
  padding: 0;
  margin: 0 0 0 auto;
  /* just so you can see the centering */
  background: #9C27B0;
}
1 Like
6

That doesnt work for some reason, heres my code and examples;

image
image1920×759 64.5 KB

image
image1913×573 44 KB

Anything anyone would change about my approach to the nav bar also?

7

can you share your code on repl.it or codepen or something? easier to see what’s going on like that

8

Sorry yeah here it is

9

So I see the logo is on the left and the nav items are in the right, what problem are you currently trying to solve?

10

Just want the nav options to be in line. Like display: flex would usually give

11 
.nav-right li {
  display:inline-block;
}
12

Thanks so much man.

So just to clarify, if I made a div and it had paragraphs in it and I wanted to pop the paragraphs in line like this I couldnt just make a class for the div and apply it to that, I need to specify what inside the div I want to make inline?

I thought I could make a div and do say display: flex and this sorts everything inside the div.

13

You have example code for this? Hard to visualize just from a description.

14

Its just really the example above I’m referring to, I’ve created nav bars before and used display flex to do it so just puzzled why I cant this time.

Don’t worry about that though, in stead I’ll ask… this challenge wants me to make this website with the same functionality, but the nav bar is sticky which after a quick google you need JS to do. I’ve not done any JS yet so am I missing something?

15

Well you can do the UL with flexbox as well if that is what you mean:

.nav-right ul{
  display:flex;
  list-style:none;
}

.nav-right ul li{
  margin:10px;
}

As for the other thing, usually making something sticky involves using position:fixed. Not sure why JavaScript would be needed. Did any of the posts you found say why?

16

The post must of been nonesense then, glad to hear it!

On the same challenge I am onto creating the part with the 3 benefits, the images next to them I cannot copy though for some reason. Is this because they are done with CSS? If so do I need to create these in CSS to pass? I was hoping to never need to do this lol, seems so silly coding an image

Im referencing this:

and these:

image
image1580×478 22.3 KB

17

This was the post that told me JS is needed rather than just telling me what you did

https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

18

The script just makes it toggle between being sticky and not being sticky based on how far down the page you have scrolled. Not sure if that is a requirement for the exercise.

19

Yeah those are actually font-awesome icons not image files. Check out https://fontawesome.com/icons?d=gallery for how to use those. You do those by adding classes to <i></i> tags. E.g.,

<i class="fa fa-3x fa-fire"></i>