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 trialRhonda Goolsby
6,992 PointsWhy doesn't the .copyright clear both floats when I add .clearfix to the .copyright class?
/* 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;
}
<!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">©2015 The Best City.</p>
</footer>
</div>
</body>
</html>
4 Answers
Steven Parker
231,236 PointsThe "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">©2015 The Best City.</p>
Rhonda Goolsby
6,992 PointsThanks 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
231,236 PointsI 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
6,992 PointsYes, sorry. I mean't clear: both;
Rhonda Goolsby
6,992 PointsAnd, thanks for the clearfix info. I will remember that in the future.
Steven Parker
231,236 PointsRhonda Goolsby ā Glad to help. You can mark a question solved by choosing a "best answer".
And happy coding!