Weird placement of new elements

#1

I’m currently taking on my first solo project since completing the Responsive Web Design curriculum and I’m running into a problem where the elements I code below my Nav in html are being placed awkwardly next to the left-leaning set of nav links.

I’m stumped as to what is happening and I’d really appreciate some input. Forgive the shoddy formatting. I’m a complete self-taught beginner.

Thanks

https://codepen.io/luis-iii/pen/GRoGvgV

#2

Hello!

That’s because you’re using float, in which case you need something called the clear fix. Basically, when you use float, the parent of the floated elements loses its space on the screen, which leads to unexpected results. It’s like if the parent of the floated elements was displayed as inline.

Add this to the .nav-list:

.nav-list:after {
  display: table;
  content: ' ';
  clear: both;
}

Currently, with the introduction of flex and grid there’s no need to use float anymore, but it’s good to know regardless :stuck_out_tongue:.

I hope it helps,

Stay safe and Happy coding!

1 Like
#3

Appreciate the reply :pray:. How would you use flex instead of float to get the same results I have on my code, currently?

1 Like
#4

Hi @luistaganasiii,
This is a way you could do it:
Copy of your codepen.
Notice I made a few minor changes:

  • In the HTML I moved the ‘nav-right’ component to be outside of the ‘nav-list’ component, but still inside the ‘navbar’;
  • I created a flex-container out of the ‘navbar’, so both ‘nav-list’ and ‘nav-right’ became flex-items I could move around using the flexbox properties.
  • I gave the nav-list a ‘margin-right: auto’, so that it would push the ‘nav-right’ to the right as much as possible automatically.
  • I made the ‘nav-list’ a flex-containers as well, so I could easily position all items next to one another without having to use floats.
  • I defined a width for the nav-right element, so I could create more space to move the elements around in that container (otherwise, the flex-container just fits its content).
  • I didn’t touch the drop-down-menus, but it’s easy enough to turn them into flex-containers and set the flex-direction property to ‘column’ so that all the items appear in a column.

If you have any questions about what I did, let me know :slight_smile: .

2 Likes
#5

Wow, thanks so much for the input.

Appreciate it a lot, definitely will be using flexbox from now on. I always knew about it but I have a greater understanding of it after reading your comment!

Edit: I’m wondering how ‘margin-right: auto’ in ‘nav-list’ is only affecting the ‘nav-right’ class in pushing it to the right while the rest of the nav is still in place.

#6
#7
#8

Hi @luistaganasiii,

No problem! My pleasure.
Yes, flexbox is great!

Think about it this way:
The high-level structure of that element is:
The navbar element is the parent of two children:

  • The nav-list element, and
  • the nav-right element.

Both these children elements are placed in the HTML at the same level, with the navbar being the one where they live, so if you want to imagine it visually, it looks something like this:

navbar
/---------------------------------------------------------\
|
| – nav-list --------------------------------nav-right-
|
\---------------------------------------------------------/

So, nav-list and nav-right are one next to the other. If you give nav-list a big margin-right, it will push nav-right to the right, which is what you want.

The property margin-right set to auto, will basically create a margin to the right that is as big as it can be, effectively pushing nav-right as far right as possible until it hits the side of its container (navbar).

I hope it’s clear :slight_smile:
Have a good one!

1 Like