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

Colin Sygiel
Colin Sygiel
5,249 Points
Posted by Colin Sygiel
Colin Sygiel
5,249 Points

Why does not adding "clearfix" to the html <copyright> solve this problem? It is already defined in the css.

Since clearfix is already defined in the CSS, shouldn't it work the same if it is added to html?

style.css 
/* Complete the challenge by writing CSS below */
.footer-nav {
  float: left;
}

.logo {
  float: right;
}

.footer-nav li {
  float: left;
}



.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
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 clearfix">&copy;2015 The Best City.</p>
        </footer>
    </div>
    </body>
</html>

1 Answer

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Colin,

The last task for this challenge isn't asking for you to use the clearfix class, but a property applied directly to the .copyright selector that allows you to ensure it sits below. The property the task is looking for is clear, see the below link which explains all the use cases for this property.

https://developer.mozilla.org/en/docs/Web/CSS/clear

I won't give the answer the directly, but this task is simple enough that reading the above link will help more than just pasting some code in my answer.

Happy coding!

Colin Sygiel
Colin Sygiel
5,249 Points
Colin Sygiel
Colin Sygiel
5,249 Points

Big thanks, Chris. It's my understanding that the clearfix would do the same thing, but the clearboth is what they were asking for.

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

You're welcome, the difference between the two can be associated with the way margin and padding work. margin applies to the outside of an element which relates to the way clear works while padding applies to the inside of an element like clearfix.

Colin Sygiel
Colin Sygiel
5,249 Points
Colin Sygiel
Colin Sygiel
5,249 Points

Great, thanks again Chris! Cheers.