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

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

Al Lu
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree
Al Lu
UX Design Techdegree Student 15,801 Points

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