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 giorgio gristina
.a{fill-rule:evenodd;}techdegree seal-36
giorgio gristina
Front End Web Development Techdegree Graduate 13,839 Points

hey guys, I m having a problem with this exercise. do u know the solution?

i add class="col" to logo footer-nac and copyright

in css the selector col i did put float=right;

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



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

.footer-nav{

  width: 30%;
}

.logo{

  width: 30%;
}

.copyright{

  width: 30%;
}

.col{
  float: right;
}
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 col" src="city-logo.svg" alt="logo">
            <ul class="footer-nav col">
                <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 col">&copy;2015 The Best City.</p>
        </footer>
    </div>
    </body>
</html>

3 Answers

Fran ADP
Fran ADP
6,304 Points
Fran ADP
Fran ADP
6,304 Points

You didn't use the clearfix.

jhon white
jhon white
20,006 Points
jhon white
jhon white
20,006 Points

I think you are floating everything to the right side, and you didn't use the clearfix. So, I did the challenge to get clear view to the problem and here is my answer: .clearfix::after { content: ""; display: table; clear: both; }

.footer-nav{ float:left; }

.logo, .footer-nav li{ float:right; }

Good luck :)

giorgio gristina
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
giorgio gristina
Front End Web Development Techdegree Graduate 13,839 Points
giorgio gristina
.a{fill-rule:evenodd;}techdegree seal-36
giorgio gristina
Front End Web Development Techdegree Graduate 13,839 Points

Thanks u so much guys!

jhon white
jhon white
20,006 Points

you are welcome and good luck :)