Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Layout Basics Page Layout with the Float Property Footer Layout with Floats

Jonas Rafn
Jonas Rafn
7,248 Points

HELP! This one is seriously bugging me..

The copyright text in the footer needs to be moved down below the floated elements. Select .copyright and apply the property and value that clears both the left and right floats.

I've looked at this question for so long i can't figure see straight any more, i'm completely blind towards what i'm looking for.

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: left; 

.copyright {
  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="footer 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

Hi Jonas I have used your code in the challenge (with the inclusion of the .footer-nav li - with a "}"), and all the tasks passed. So I'm not sure what else it could be.

Jonas Rafn
Jonas Rafn
7,248 Points

Okay, i'll keep trying. Thanks for the quick response!

Hi Jonas

You just forgot to close the .footer-nav li - with a "}"

Jonas Rafn
Jonas Rafn
7,248 Points

I forgot that too, but it was not the problem. It says "Are you using the property and value that clears both floats?" And i don't know what that means..