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

by

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.

More Related Contents:

  1. How do you keep parents of floated elements from collapsing? [duplicate]
  2. How to align 3 divs (left/center/right) inside another div?
  3. Why doesn’t the height of a container element increase if it contains floated elements?
  4. How can I wrap text around a bottom-right div?
  5. How do I get a div to float to the bottom of its container?
  6. IE9 Float with Overflow:Hidden and Table Width 100% Not Displaying Properly
  7. How to align two elements on the same line without changing HTML
  8. CSS Float: Floating an image to the left of the text
  9. CSS Float Logic
  10. Is there a disadvantage of using `display:table-cell`on divs?
  11. Why do s clear floats?
  12. Floating Div Over An Image
  13. Prevent floated divs from wrapping to new line
  14. How to center a “position: absolute” element
  15. How to match width of text to width of dynamically sized image/title?
  16. How to create a circle with links on border side
  17. Is there a CSS selector for the first direct child only?
  18. Limit scope of external css to only a specific element?
  19. Why the content is not covered by the background of an overlapping element?
  20. How to animate underline from left to right?
  21. Drop-down menu that opens up/upward with pure css
  22. How to wrap text around an image using HTML/CSS
  23. Fullscreen responsive background image in CSS
  24. Gap in Bootstrap stacked rows
  25. What is the standard naming convention for html/css ids and classes? [closed]
  26. Mosaic of images HTML/CSS
  27. Change Select List Option background colour on hover in html [duplicate]
  28. How do I remove the default link color of the html hyperlink ‘a’ tag?
  29. Multiple submit buttons on HTML form – designate one button as default [duplicate]
  30. Bootstrap 5 layout for different sizes cards – like Pinterest

Leave a Comment