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 Clearing and Containing Floats

Is it better using inline-block in a header than float to arrange nav elements?

As I can see now, "float" is very useful in a "<section>" (for example), but in a header to arrange nav elements, inline-block could be more comfortable, or I am wrong? (Maybe I just answered my own question, but I'm a little bit confused.

3 Answers

Angela Velasquez
Angela Velasquez
3,308 Points

You can use both of the options. You just have to remember some things:

  1. For inline-block elements there's always a margin set by the browser to inline-block elements, so if you want your elements without margin, you may use a negative margin or you can check this link.
  2. For floating elements you may add a clear pseudo element with the property "clear:all" you can check this link

Also you can try with flexbox (my favorite) I think it makes more sense, since you are defining the behaviour to the parent (ul) and then to the children elements (li). You can also arrange all the elements on your top header with flexbox. Flexbox makes more easy align your elements to their parent. Here is an example of this option

I hope my answer helps you, and you can take your decision!

Cheers!

Frans Teja
Frans Teja
8,175 Points

I recommend you to learn flexbox. Hard to learn, but much easier when you want to set responsive syntax. But you still can use those two.

Thanks everyone! :)