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
Ryan Nolan
4,202 PointsHaving 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
Jasmine Breshears
3,440 Pointsyosef ali answer/comment worked for me
8 Answers
Al Lu
UX Design Techdegree Student 15,801 Pointsafter 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
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.
Arvind Kevin Arjun Sharma
8,272 PointsBtw. i tried your option too but it didn't work out Allen Lu.
Akshay Ramdasi
14,065 Points.footer-nav li{ content: "";
display: inline-block;
clear: both;
float: left;
}
terrimodomo
6,153 PointsAkshayramdasi thank you it worked.
Karthikeya Nadendla
9,747 PointsI 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
Lauren Bradley
758 PointsThis 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
19,845 PointsThis worked for me:
.footer-nav li {
float: left;
}
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.
Arvind Kevin Arjun Sharma
8,272 Pointsbtw. I tried your option too but it didn't work out Aaron HARPT.
Gavin Eyquem
Front End Web Development Techdegree Student 20,735 PointsYou could try including the float left & display: inline-block with the .footer-nav li{}. It might work or it might not.
Chris Wade
9,574 PointsNot 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
knowledge tirivanhu
10,125 Points.footer-nav li { width: 100%; float: left; margin: 0 0 3em 0; padding: 0
Yosef Ali
15,182 PointsYosef Ali
15,182 Pointstray this
.clearfix::after { content: ""; display: table; clear: both; } .footer-nav { float: left; } .logo { float: right; } .footer-nav li { float: right; }