CSS CSS Layout Basics CSS Layout Project Column Layout with Media Queries

Leo Marco Corpuz
Leo Marco Corpuz
18,975 Points

My clearfix isn't working

Am I applying my clearfix correctly? The banner background is still hiding the navigation list elements and the footer background is covering the three columns.

https://w.trhou.se/08fgsdg5ml

https://w.trhou.se/88x7qqfrcf

Leo Marco Corpuz
Leo Marco Corpuz
18,975 Points

Here's my updated code, what I need to know is how to get the columns side by side, I think I've tried adding an inline display to the col class but it didn't work. Also I'm wondering how to reverse the order of the nav list items.

https://w.trhou.se/5ylse4hnon

1 Answer

Steven Parker
Steven Parker
203,995 Points

It looks like you skipped the step demonstrated about 20 seconds into the video where the "float" property is applied to the ".col" class. This places the columns side-by-side.

The nav items appear in reverse order because the "float: right" property setting is applied directly to the list items. In the videos, that property is applied to the "`.main-nav" class instead.

Leo Marco Corpuz
Leo Marco Corpuz
18,975 Points

So I applied the float:left to the col class, but the footer container is overlapping the columns .I applied the float:left to the main-nav class but they're stacked on top of each other. I tried setting the display to inline but that didn't do anything.

https://w.trhou.se/7773mi5eew

Steven Parker
Steven Parker
203,995 Points

I don't remember offhand how this is done in the video, but one quick way to solve the footer overlap would be to apply the clearfix to the container div on line 27:

<div class="container clearfix">
Leo Marco Corpuz
Leo Marco Corpuz
18,975 Points

Thanks, the footer overlap is fixed.I still need to figure out how to get the navigation list items inline and in the right order.

Steven Parker
Steven Parker
203,995 Points

As I said before, move the "float: right" from the list items (".main-nav li") and put it instead directly on the .main-nav the way it is in the video.