Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Basics Page Layout with the Float Property Footer Layout with Floats

Jonavan Helom
Jonavan Helom
2,593 Points
Posted by Jonavan Helom
Jonavan Helom
2,593 Points

i'm stuck

I'm stuck on the 2nd part of the challenge, it keep saying, "Make sure you're floating the list items inside '.footer-nav'." what's it mean by floating list?

style.css 
/* Complete the challenge by writing CSS below */



.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.footer-nav {
 float: left;
}
.logo {
  float: right;
}
.footer-nav li {
 display: inline-block;
}
index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Getting Started with CSS Layout</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
    <body>
    <div class="container">
        <footer>
            <img class="logo" src="city-logo.svg" alt="logo">
            <ul class="footer-nav">
                <li><a href="#">Ice cream</a></li>
                <li><a href="#">Donuts</a></li>
                <li><a href="#">Tea</a></li>
                <li><a href="#">Coffee</a></li>
            </ul>
            <p class="copyright">&copy;2015 The Best City.</p>
        </footer>
    </div>
    </body>
</html>

3 Answers

Robin Orellana
Robin Orellana
11,626 Points
Robin Orellana
Robin Orellana
11,626 Points

there are many ways to style a site using css so the way you have it is technically correct but since in this challenge it is asking to use the float property to display them side by side so the correct code for this challenge is 

.footer-nav li {
  float: left;
}
Carmen Wright
Carmen Wright
25,867 Points
Carmen Wright
Carmen Wright
25,867 Points

I think the problem you were having is that not with the .footer-nav but really with the list in the .footer-nav.

Since you're using the display property in your answer, it's not really floating. Using a float: inherit ensures that you're floating the list as well as inheriting the parent's float. I tried to use float: left for the list, but that was coming up with the same error you got.

To be honest, I don't understand why float: left; didn't initially work. I only got the answer I did by some trial and error. Hopefully, there's someone else who can explain why.

.footer-nav {
    float: left;
}

.footer-nav li {
    float: inherit;
}
nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

You're making a really valid point there Carmen Wright .

And honestly despite the problems, you came up with some really clever solution there. High five for that effort and just giving up!

I think that the way he was expecting to do it was using the most DRY possible, which in this case would have been simply adding the footer-nav li descendant selector to the footer-nav itself like this:

.footer-nav,
.footer-nav li {
  float: left;
}

That would apply it to both in only one rule.

Hope that helps clear (pardon the pun!) your question. :)

Carmen Wright
Carmen Wright
25,867 Points
Carmen Wright
Carmen Wright
25,867 Points

facepalm Your answer, Nico, is totally DRY. I've been working with Sass lately and my immediate reaction was to nest it but that wouldn't work here.