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

HTML How to Make a Website Styling Web Pages and Navigation Build Navigation with Unordered Lists

Can 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
Steven Parker
229,952 Points

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

Thank you so much for this info. It will be taught later in the course then. Looking forward to it.