Floating a nav bar to the right inverts the links

HTML-CSS
1

`nav {
background-color: grey;
display: block;
overflow: hidden;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

li {
float: right;
}

li a{
display: block;
padding: 10px;
}`

This puts the nav bar accross the top of the page which is what I want. It also aligns the links on the left like I would like but it inverts them. Last link first, first link last…I am sure I am doing something (or several things wrong) but this has me really scratching my head. 2 Books, a few hours on W3 and still stumped. Any nudge in the right direction is GREATLY appreciated.

2

Take a look into using flexbox to style your navbar.

Besides the info you can find on MDN if you’re not comfortable yet with flexbox play around a little with flexbox froggy

I always reference the Complete Guide to Flexbox too.

And Wes Bos has a free, and very good, course on Flexbox called ‘What the Flexbox’.

3

You can float the ul right and then float the li left. But I would also suggest looking into other and newer ways to do layout.

4

Ok well there went a few days :wink: Thanks Roma that was a huge nudge in the right direction. I ended up using a simple solution to get the page to work as intended but the links you provided where a HUGE help! For whatever reason the box/flexbox/grid messes with my head so the flexbox froggy seems to be helping get it straight up there.

Thanks again!

1 Like
5

Glad the links helped. And if you didn’t notice, at the bottom of flexbox froggy there’s a link to Grid Garden. Basically like froggy but for CSS Grid.

1 Like
6

And yet, another gem I missed hehe…Thank you!

1 Like