Advantages of using display inline-block vs float left in CSS

Question

Normally  when we want to have multiple DIVs in a row we would use float  left  but now I discovered the trick of display inline-block  Example link here  It seems to me that display inline-block is a better way to align DIVs in a row  but are there any drawbacks  Why is this approach less popular then the float trick

User · Answer

If you want to align the div with pixel accurate  then use float  inline-block seems to always requires you to chop off a few pixels  at least in IE

User · Answer

In 3 words  inline-block is better   Inline Block  The only drawback to the display  inline-block approach is that in IE7 and below an element can only be displayed inline-block if it was already inline by default   What this means is that instead of using a  lt div gt  element you have to use a  lt span gt  element  It s not really a huge drawback at all because semantically a  lt div gt  is for dividing the page while a  lt span gt  is just for covering a span of a page  so there s not a huge semantic difference  A huge benefit of display inline-block is that when other developers are maintaining your code at a later point  it is much more obvious what display inline-block and text-align right  is trying to accomplish than a float left or float right statement   My favorite benefit of the inline-block approach is that it s easy to use vertical-align  middle  line-height and text-align  center to perfectly center the elements  in a way that is intuitive   I found a great blog post on how to implement cross-browser inline-block  on the Mozilla blog  Here is the browser compatibility   Float  The reason that using the float method is not suited for layout of your page is because the float CSS property was originally intended only to have text wrap around an image  magazine style  and is  by design  not best suited for general page layout purposes  When changing floated elements later  sometimes you will have positioning issues because they are not in the page flow   Another disadvantage is that it generally requires a clearfix otherwise it may break aspects of the page   The clearfix requires adding an element after the floated elements to stop their parent from collapsing around them which crosses the semantic line between separating style from content and is thus an anti-pattern in web development   Any white space problems mentioned in the link above could easily be fixed with the white-space CSS property   Edit   SitePoint is a very credible source for web design advice and they seem to have the same opinion that I do      If you   re new to CSS layouts  you   d be forgiven for thinking that   using CSS floats in imaginative ways is the height of skill  If you   have consumed as many CSS layout tutorials as you can find  you might   suppose that mastering floats is a rite of passage  You   ll be dazzled   by the ingenuity  astounded by the complexity  and you   ll gain a sense   of achievement when you finally understand how floats work       Don   t be fooled  You   re being brainwashed    http   www sitepoint com give-floats-the-flick-in-css-layouts   2015 Update - Flexbox is a good alternative for modern browsers    container     display  flex     or inline-flex        item     flex  none      lt  flex-grow  gt   lt  flex-shrink  gt       lt  flex-basis  gt        More info  Dec 21  2016 Update  Bootstrap 4 is removing support for IE9  and thus is getting rid of floats from rows and going full Flexbox   Pull request  21389

User · Answer

You can find answer in depth here   But in general with float you need to be aware and take care of the surrounding elements and inline-block simple way to line elements   Thanks

User · Answer

While I agree that in general inline-block is better  there s one extra thing to take into account if you re using percentage widths to create a responsive grid  or if you want pixel-perfect widths    If you re using inline-block for grids that total 100  or near to 100  width  you need to make sure your HTML markup contains no white space between columns    With floats  this is not something you need to worry about - the columns float over any whitespace or other content between columns  This question s answers have some good tips on ways to remove HTML whitespace without making your code ugly    If for any reason you can t control the HTML markup  e g  a restrictive CMS   you can try the tricks described here  or you might need to compromise and use floats instead of inline-block  There are also ugly CSS tricks that should only be used in extreme circumstances  like font-size 0  on the column container then reapply font size within each column   For example     Here s a 3-column grid of 33 3  width with float  left  It  just works   but for the wrapper needing to be cleared   Here s the exact same grid  with inline-block  The whitespace between blocks creates a fixed-width space which pushes the total width beyond 100   breaking the layout and causing the last column to drop down a line  Here  s the same grid  with inline-block and no whitespace between columns in the HTML  It  just works  again - but the HTML is uglier and your CMS might force some kind of prettification or indenting to its HTML output making this difficult to achieve in reality

User · Answer

There is one characteristic about inline-block which may not be straight-forward though  That is that the default value for vertical-align in CSS is baseline  This may cause some unexpected alignment behavior  Look at this article   http   www brunildo org test inline-block html  Instead  when you do a float left  the divs are independent of each other and you can align them using margin easily

[css] Advantages of using display:inline-block vs float:left in CSS

Examples related to css

Examples related to css-float

Examples related to html