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 STEVEN PENA
STEVEN PENA
13,928 Points

Next, display the list items inside .footer-nav side by side with a float.

i dont know were am going wrong

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



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

}

.logo { 
  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" 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>

5 Answers

Emily Easton
Emily Easton
13,575 Points
Emily Easton
Emily Easton
13,575 Points

Hey, this worked for me! Hope this helps, you used inline but it needs to be inline-block because inline-block lays out navigation items side-by-side. I didn't read it properly at first and did what you did :)

.footer-nav, .footer-nav li { float: left; display: inline-block; }

Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

Hey Steven,

I'm not sure if that's all of your CSS code, but if it is, don't remove the code from the first task. Your CSS should look something like this:

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

.footer-nav,
.footer-nav li {
  float: left;
}

.logo {
  float: right;
}
Dipika Purohit
PLUS
Dipika Purohit
Courses Plus Student 20,955 Points
Dipika Purohit
Dipika Purohit
Courses Plus Student 20,955 Points

.footer-nav,.footer-nav li {

float:left; display:inline-block; }

Khaidem Sandip Singha
seal-mask
.a{fill-rule:evenodd;}techdegree
Khaidem Sandip Singha
Front End Web Development Techdegree Student 17,574 Points
Khaidem Sandip Singha
.a{fill-rule:evenodd;}techdegree
Khaidem Sandip Singha
Front End Web Development Techdegree Student 17,574 Points 
.footer-nav li{
  float: left;
    display: inline;
}
Mustafa Abrams
Mustafa Abrams
10,288 Points
Mustafa Abrams
Mustafa Abrams
10,288 Points

Try this:

.footer-nav{
float:left;
}
.footer-nav li{
float:left;
display:inline;
}
.logo{
float:right;
}