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

Posted by Abdullahi Abdinasir Ali
Abdullahi Abdinasir Ali
9,520 Points

How do I display footer-nav list with floats

I can't pass stage 2 of this stage.am not really understanding whether I should set new class or same class

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



.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

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

.logo
  float: right
  }
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

Raffael Dettling
Raffael Dettling
32,999 Points
Raffael Dettling
Raffael Dettling
32,999 Points

Oh then you forgot the comma and the point footer-nav is still a class and you have to sperate the targets by a ","

.footer-nav, .footer-nav li
Abdullahi Abdinasir Ali
Abdullahi Abdinasir Ali
9,520 Points

Thanks for u help

Raffael Dettling
Raffael Dettling
32,999 Points
Raffael Dettling
Raffael Dettling
32,999 Points

You forgot the opening { and the ; at the .logo rule also you don´t need to target the footer-nav li

.footer-nav{
  float: left;
  }

.logo{
  float: right;
  }
Abdullahi Abdinasir Ali
Abdullahi Abdinasir Ali
9,520 Points
Abdullahi Abdinasir Ali
Abdullahi Abdinasir Ali
9,520 Points

Ok but the stage of the quiz. I got that . Am asking 2nd stage where it is asking display list items inside footer-nav class to float them side by side