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 Polish the Navigation and Footer

Posted by Luis Dominguez
Luis Dominguez
3,516 Points

Display: inline-block vs. float left for the nav?

This is not a question strictly related to the video, rather something that occurred to me as an afterthought. Speaking about the navigation bar: why use display:inline-block to order things, and not float:left? I've tried float:left and it fails to work, even when I use max-width to reduce the size of the <ul> and <li> elements. I don't see why float:left wouldn't work; float affects elements, and isn't <li> an element?

Thanks for reading through this, it's a bit of a complicated question, but I guess I want to know why we use display: inline-block for the navigation bar, to get a deeper understanding on the HTML/CSS I'm learning right now.

1 Answer

Sueanna Post
Sueanna Post
2,163 Points
Sueanna Post
Sueanna Post
2,163 Points

What will help you understand is that float was originally intended so that the text would wrap around the object. This works well for images and video's, but not so much for the nav(unless you are referring to it as a column). Also, if you just float it, it disturbs the flow of the rest of the page.