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

Ran Pur
Ran Pur
536 Points
Posted by Ran Pur
Ran Pur
536 Points

side by side

I need a little help. I am confused because I thought we used width to put items side by side. If this is correct, Where am I messing up?

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 ul {
    width: 40%;
}
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>

2 Answers

Karen Fletcher
Karen Fletcher
19,189 Points
Karen Fletcher
Karen Fletcher
19,189 Points

You're really close! For floats, specifying the width is how much space we want each item to take up (like for columns, if we want one to take up 60% and another to take up 40%). To float all the items in the list of the footer, you'd need to give it a float property. Try targeting the list items, and give them a float either left or right.

David Bilson
David Bilson
13,819 Points
David Bilson
David Bilson
13,819 Points

@Ran pur

Adding a width to an element doesn't put items side by side. It just makes them a certain width.

For this exercise you have four tasks:

Task 1 of 4

You are asked to float.footer-nav left and to float.logo right.

You need to use the classes that have been provided above in your style.css and apply floats to them.

Task 2 of 4

Display list items inside .footer-nav side by side with a float

The question asks you to display list items, therefore you need to be targeting your list items within .footer-nav with your css to float them.

Task 3 of 4

Give footer element a class to clear all floats.

The CSS class is already provided for you in the style.css file. You need to go into the HTML and apply it to the footer element (add the class to the footer element).

Task 4 of 4

The copyright text needs to be moved below floated elements.

You need to select the element and add a property to clear floats.

I have tried to help with hints. Just take the tasks one by one and do what they say.