When to use Float vs Position vs Display for laying out elements and aligning blocks on page

Here are the recommendations:

Float:

  • Use this for content that flows around (i.e. variable and flexible content). A good example is an image surrounded by texts of different lengths. So even if the amount of text can change, but using float will allow it to flow around the image.
  • Float is also very useful in laying out major parts of layout like header, footer or sidebar.

Display:

  • Can be useful for aligning page components but you need to account for the extra space around the element (

    display: inline-block

    will put a default space between elements having it)

  • Very useful in creating centered horizontal navs because of the fact that the property

    text-align: center

    works on aligning child elements as well.

  • You also don’t need to worry about changing the stacking order or natural flow of elements on the page because it does not affect the layout flow of elements on the page.

Position:

  • Used when an element needs to be positioned relative to another element.
  • Also useful in positioning elements that exist outside the natural document flow like a fixed nav bar.
  • Positioning elements to a specific place or spot onĀ  the page.
  • DON’T use positioning for page layout since it takes the element out of the stacking order with the exception of relative positioning.

Note:

  • Float, display and position cannot be used together on the same element. You need to choose one or the other option.
  • If using position (if it is set to absolute or fixed), then float is ignored.
  • If using float, then display is ignored.
Tek Shinobi
Author: Tek Shinobi

Hiya Ninjas, I am the ninja who invented the fire, wheel, science, technology and everything intelligent this humanity has ever experienced since its evolution from monkeys and germs. Actually, above is a partial list. I also was involved with the Big Bang that created this universe. What was it like before the Big Bang is so secret that if I tell you, I will have to turn you into a hobbit and force you to be my gardener. Okay. Sayonanra, Namaste Tek Shinobi




No Comments


You can leave the first : )



Leave a Reply

Your email address will not be published. Required fields are marked *