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

Rhonda Goolsby
Rhonda Goolsby
6,992 Points
Posted by Rhonda Goolsby
Rhonda Goolsby
6,992 Points

Why doesn't the .copyright clear both floats when I add .clearfix to the .copyright class?

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

.footer-nav li{
float:left;
}

.logo {
float: right;
}
.floaty{
float: left;
}
.copyright{
  float: left;
overflow: auto;
}


.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 floaty">
                <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>

4 Answers

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

The "clearfix" makes use of the "::after" psuedo-element, which generates a last child inside the element it acts on. So it's typically added to an element that contains floated child elements to make sure the float effect is cancelled while still inside the container, such as the footer in this example.

Adding it to an element that you want shown after the effect has been cleared won't help.

But what you could do instead is place it on an empty element between the list and paragraph:

      </ul>
      <div class="clearfix"></div>  <!-- add this line -->
      <p class="copyright">&copy;2015 The Best City.</p>
Rhonda Goolsby
Rhonda Goolsby
6,992 Points
Rhonda Goolsby
Rhonda Goolsby
6,992 Points

Thanks Steven, I got it to work by adding clearfix to the .copyright class and this declaration in the styles sheet: .copyright{ clear: float; }

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

I assume you mean "clear: both;" (since "float" is not a value for "clear"); but that's what did the clearing.

The "clearfix" class will still be ineffective directly on the copyright element and can be omitted.

Rhonda Goolsby
Rhonda Goolsby
6,992 Points
Rhonda Goolsby
Rhonda Goolsby
6,992 Points

Yes, sorry. I mean't clear: both;

Rhonda Goolsby
Rhonda Goolsby
6,992 Points
Rhonda Goolsby
Rhonda Goolsby
6,992 Points

And, thanks for the clearfix info. I will remember that in the future.

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

Rhonda Goolsby ā€” Glad to help. You can mark a question solved by choosing a "best answer".
And happy coding!