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!


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! :)