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 trialweb pad
4,483 PointsCan I also use the float property to style the nav unordered list? Or is float only applicable to certain elements?
Hi, I just tried experimenting with floats even in styling the nav unordered list. I targeted the nav li and it displayed the nav links side by side each other. The problem now though is that they were pushed down, so that they are now below the dark green box where they were initially contained in. Also they are not centered in the page. I tried to set a width of 100%, but what happened is that they will not be side by side each other anymore, and will just be on top of each other on the left side. So I scratched the width property. I hope my question is making sense. Thank you in advance. This is my code.
/************************* NAVIGATION *************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav li {
float:left;
margin: 2%;
padding:10px;
display:inline-block;
}
1 Answer
Steven Parker
231,198 PointsFloats are rendered outside of the normal document flow, so to keep them from extending beyond their container, you should apply a clearfix. This technique should be part of a course that introduces floats, perhaps you need to proceed ahead another video or two.
They also pose problems when you want centered content. This is one reason more modern techniques like "flexbox" are becoming popular replacements for floats.
web pad
4,483 Pointsweb pad
4,483 PointsThank you so much for this info. It will be taught later in the course then. Looking forward to it.