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

Having trouble displaying list items inside .footer-nav side by side with a float

Don't know if it should be listed under .footer-nav or separated on a different entry

Yosef Ali
Yosef Ali
15,182 Points

tray this

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

yosef ali answer/comment worked for me

8 Answers

after you give float right to the logo (.logo) and float left to the list items (.footer-nav ) you also need to clear the floats. so put a new div after .footer-nav and give it a class with the name "clearfix". you can give the list items inside the list (.footer-nav li) an inline-block (display:inline-block;) or float:left to make them side by side

Arvind Kevin Arjun Sharma
Arvind Kevin Arjun Sharma
8,272 Points

.footer-nav li {

content: "";

display: inline-block;

clear: both;

float: left;

}

.logo {

float: right;

}

What am i doing wrong? i really need help with this cause i'm stuck with it for hours even for days, and i tried everything what is possible.

Akshay Ramdasi
Akshay Ramdasi
14,065 Points

.footer-nav li{ content: "";

display: inline-block;

clear: both;

float: left;

}

Akshayramdasi thank you it worked.

Karthikeya Nadendla
Karthikeya Nadendla
9,747 Points

I am facing the same trouble. I tried listing it same and different as well but still I face the error. Please let me know the answer for this.

Thank you

This worked for me:

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

.footer-nav { float: left;

}

.footer-nav li { display: inline; clear: both; float: left; }

.logo { float: right; }

Aaron HARPT
Aaron HARPT
19,845 Points

This worked for me:

.footer-nav li {
float: left;
}
Arvind Kevin Arjun Sharma
Arvind Kevin Arjun Sharma
8,272 Points

.footer-nav li {

content: "";

display: inline-block;

clear: both;

float: left;

}

.logo {

float: right;

}

What am i doing wrong? i really need help with this cause i'm stuck with it for hours even for days, and i tried everything what is possible.

Chris Wade
Chris Wade
9,574 Points

Not sure if anyone is still having trouble with this one but i think i may have cracked it

.footer-nav li {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0

.footer-nav li { width: 100%; float: left; margin: 0 0 3em 0; padding: 0