float left vs display inline vs display inline-block vs display table-cell

Question

My Question s    Are any of these methods preferred by a professional web designer  Are any of these methods prefereed by a web browser when drawing the website  Is this all just personal preference  Are there other techniques I m missing    Note  Above questions are in regards to designing a multi-column layout    float left   http   jsfiddle net CDe6a     This is the method I always use when creating column layouts  and it seems to work just fine  The parent does collapse on itself though  so you just need to remember to clear both  afterwards  Another con that I just found was the inability to align text vertically   display inline   This seems to correct the problem of the collapsing parent  but adds whitespace   http   jsfiddle net CDe6a 1     Removing whitespace from html seems to be the easiest fix this problem  but is not desired if you are really picky about your html   http   jsfiddle net CDe6a 2     display inline-block   Seems to behave exactly like display inline    http   jsfiddle net CDe6a 3     display table-cell   http   jsfiddle net CDe6a 4     Works perfect   My thoughts   I m sure I m missing a ton of stuff  like certain exceptions that will break the layout but  display table-cell  seems to work the best  and I think I will start replacing float left  as I always seem to mess up on clear both   I ve read many articles and blogs about this on the web  but none of them give me a definite answer on what I should use when laying out my website

User · Answer

For the record only  to add to Spudley s answer  there is also the possibility to use position  absolute and margins if you know the column widths   For me  the main issue when chossing a method is whether you need the columns to fill the whole height  equal heights   where table-cell is the easiest method  if you don t care much for older browsers

User · Answer

I d say it depends on what you need it for    If you need it just to get 3 columns layout  I d suggest to do it with float  If you need it for menu  you can use inline-block  For the whitespace problem  you can use few tricks as described by Chris Coyier here http   css-tricks com fighting-the-space-between-inline-block-elements   If you need to make a multiple choice option  which the width needs to spread evenly inside a specified box  then I d prefer display  table  This will not work correctly in some browsers  so it depends on your browser support    Lastly  what might be the best method is using flexbox  The spec for this has changed few times  so it s not stable just yet  But once it has been finalized  this will be the best method I reckon

User · Answer

Of the options you asked about    float left  I dislike floats because of the need to have additional markup to clear the float  As far as I m concerned  the whole float concept was poorly designed in the CSS specs  Nothing we can do about that now though  But the important thing is it does work  and it works in all browsers  even IE6 7   so use it if you like it    The additional markup for clearing may not be necessary if you use the  after selector to clear the floats  but this isn t an option if you want to support IE6 or IE7    display inline  This shouldn t be used for layout  with the exception of IE6 7  where display inline  zoom 1 is a fall-back hack for the broken support for inline-block  display inline-block  This is my favourite option  It works well and consistently across all browsers  with a caveat for IE6 7  which support it for some elements  But see above for the hacky solution to work around this    The other big caveat with inline-block is that because of the inline aspect  the white spaces between elements are treated the same as white spaces between words of text  so you can get gaps appearing between elements  There are work-arounds to this  but none of them are ideal   the best is simply to not have any spaces between the elements    display table-cell  Another one where you ll have problems with browser compatibility  Older IEs won t work with this at all  But even for other browsers  it s worth noting that table-cell is designed to be used in a context of being inside elements that are styled as table and table-row  using table-cell in isolation is not the intended way to do it  so you may experience different browsers treating it differently    Other techniques you may have missed  Yes    Since you say this is for a multi-column layout  there is a CSS Columns feature that you might want to know about  However it isn t the most well supported feature  not supported by IE even in IE9  and a vendor prefix required by all other browsers   so you may not want to use it  But it is another option  and you did ask  There s also CSS FlexBox feature  which is intended to allow you to have text flowing from box to box  It s an exciting feature that will allow some complex layouts  but this is still  very much in development -- see http   html5please com  flexbox   Hope that helps

User · Answer

I usually use float  left  and add overflow  auto  to solve the collapsing parent problem  as to why this works  overflow  auto will expand the parent instead of adding scrollbars if you do not give it explicit height  overflow  hidden works as well   Most of the vertical alignment needs I had are for one-line of text in menu bars  which can be solved using line-height property  If I really need to vertical align a block element  I d set an explicit height on the parent and the vertically aligned item  position absolute  top 50   and negative margin   The reason I don t use display  table-cell is the way it overflows when you have more items than the site s width can handle  table-cell will force the user to scroll horizontally  while floats will wrap the overflow menu  making it still usable without the need for horizontal scrolling    The best thing about float  left and overflow  auto is that it works all the way back to IE6 without hacks  probably even further

User · Answer

I prefer inline-block  although float is also useful  Table-cell isn t rendered correctly by old IEs  neither does inline-block  but there s the zoom  1   display  inline hack that I use frequently   If you have children that have a smaller height than their parent  floats will bring them to the top  whereas inline-block will screw up sometimes    Most of the time  the browser will interpret everything correctly  unless  of course  it s IE  You always have to check to make sure that IE doesn t suck-- for example  the table-cell concept   In all reality  yes  it boils down to personal preference    One technique you could use to get rid of white space would be to set a font-size of 0 to the parent  then give the font-size back to the children  although that s a hassle  and gross

User · Answer

I prefer inline-block  but float are still useful way to put together HTML elemenets  specially when we have elements which one should stick to the left and one to the right  float working better with writing less lines  while inline-block working well in many other cases

[html] float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

Examples related to html

Examples related to css

Examples related to css-float