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

Jack Cummins
Jack Cummins
17,417 Points
Posted by Jack Cummins
Jack Cummins
17,417 Points

How does this not work!!!!!!

Task 4of4: "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."

What did I do Worng?

Thank you so much in advance, Jack Cummins

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



.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.footer-nav{
  float:left;
}

.logo{
  float:right;
}
.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>
            <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>

1 Answer

Matthew Long
Matthew Long
28,407 Points
Matthew Long
Matthew Long
28,407 Points

Looks like you've completed task 1 and 4 but not 2 and 3? I'm not even sure how you got to task 4 before passing 2 and 3? Task 2 wants you to float the list items inside the footer-nav class:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.footer-nav {
  float: left;
}

.footer-nav li {
  float: left;
}

.logo {
  float: right;
}

.copyright {
  clear: both;
}

Task 3 wants you to add the clearfix class to the footer element:

<footer class="clearfix">