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

Jonas Rafn
Jonas Rafn
7,248 Points
Posted by 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

Chris Jardine
Chris Jardine
13,299 Points

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
Jonas Rafn
Jonas Rafn
7,248 Points

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

Chris Jardine
Chris Jardine
13,299 Points
Chris Jardine
Chris Jardine
13,299 Points

Hi Jonas

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

Jonas Rafn
Jonas Rafn
7,248 Points
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..