Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Layout Basics Page Layout with the Float Property Footer Layout with Floats

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

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.

@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.