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

Posted by domenicpatruno
domenicpatruno
12,873 Points

Challenge Task 3 of 4

Hi Treehouse,

For this challenge of CSS LAYOUT BASICS/FLOATS task 3 of 4:

The floats inside the <footer> caused its height to collapse. Give the <footer> element the class that will clear all floats inside it.

I have added the clearfix property to the container. It returns an error of wrong. When I add clearfix to the footer, I receive an error also.

<!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 clearfix"> <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">Ā©2015 The Best City.</p> </footer> </div> </body> </html>

Steef Vendy
Steef Vendy
9,436 Points
Steef Vendy
Steef Vendy
9,436 Points

Here is what you need to do:

after: 

           <div class="container">

Insert container class inside the footer with clearfix value like below:

    <footer class="container clearfix">

You dont even need to code the clearfix rule in CSS.

Yosef Ali
Yosef Ali
15,182 Points
Yosef Ali
Yosef Ali
15,182 Points

Add clearfix class to the <footer> elemnte like this <footer class="clearfix">

5 Answers

Raymond Smith
Raymond Smith
11,911 Points
Raymond Smith
Raymond Smith
11,911 Points

Here's the way that I did it...

In your HTML put

<footer class="clearfix">

Kevin Roundtree
Kevin Roundtree
4,575 Points
Kevin Roundtree
Kevin Roundtree
4,575 Points

It's hard to tell unless you note what items are being floated.

I would assume the list items are what is getting floated (possible the img too), so you would want the .clearfix class applied to the unordered list tag. I am assuming you don't want to float the paragraph and want it to clear the floated list items. Is that correct?

domenicpatruno
domenicpatruno
12,873 Points
domenicpatruno
domenicpatruno
12,873 Points

In the CSS there is already a clearfix class:

.clearfix::after { content: ""; display: table; clear: both; }

I added the clearfix class to the containing element and I still receive an error.

Any idea?

Richard Targett
Richard Targett
4,960 Points
Richard Targett
Richard Targett
4,960 Points

Im stuck on this too. Im not sure repetition helps in this case. Pros? Does it?

What does it mean when treehouse is asking "give the <footer> element" : ....... do they want us to add a rule?