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 Barry Ort
Barry Ort
12,373 Points

The challenge is to give the footer the class that clear all floats. I don't know why this isn't working.

<footer class="clearfix">

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 {
  float: leftk;
}
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 class="clearfix">
            <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>

2 Answers

Barry Ort
Barry Ort
12,373 Points

I found the problem. there was a typo in a different rule that I didn't notice.

.footer-nav li { float: leftk; }

Eric Butler
Eric Butler
33,512 Points
Eric Butler
Eric Butler
33,512 Points

Barry, The clearfix class usually requires both the ::before pseudo-element and the ::after pseudo-element included in the style definition. Try:

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

Here's the article that explains the clearfix hack, it's been pretty universally adopted as the "right" way to do it: http://nicolasgallagher.com/micro-clearfix-hack/ Hope this helps you!