Is there a disadvantage of using `display:table-cell`on divs?

by

display: table-cell is perfectly fine to use, with just one downside..

It doesn’t work in IE7 (or IE6, but who cares?): http://caniuse.com/#search=css-table

If you don’t need to support IE7, then feel free to use it.

IE7 still has some usage, but you should check your Analytics, and then make a decision.

To answer your specific use case, you can do it without display: table-cell, provided that you don’t need the height to adjust based on content:

http://jsfiddle.net/g6yB4/

<div class="clearfix">
  <div style="float:left; width:100px; background:red">some content</div>
  <div style="overflow:hidden; background:#ccc">some more content</div>
</div>

(why overflow: hidden? With: http://jsfiddle.net/g6yB4/3/ vs without: http://jsfiddle.net/g6yB4/4/)

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. float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
  5. How can I wrap text around a bottom-right div?
  6. How do I get a div to float to the bottom of its container?
  7. IE9 Float with Overflow:Hidden and Table Width 100% Not Displaying Properly
  8. How to align two elements on the same line without changing HTML
  9. CSS Float: Floating an image to the left of the text
  10. CSS Float Logic
  11. Why do s clear floats?
  12. Floating Div Over An Image
  13. Prevent floated divs from wrapping to new line
  14. Two divs side by side – Fluid display [duplicate]
  15. Expand a div to fill the remaining width
  16. How to make an image center (vertically & horizontally) inside a bigger div [duplicate]
  17. Can I write a CSS selector selecting elements NOT having a certain class or attribute?
  18. Margin-Top push outer div down
  19. Make wrapper take maximum width of child image? [duplicate]
  20. How can I display just a portion of an image in HTML/CSS?
  21. Why would margin not be contained by parent element?
  22. Why does CSS padding increase size of element?
  23. Centering floating divs within another div
  24. How to center div vertically inside of absolutely positioned parent div
  25. Center an image horizontally using CSS
  26. Alternate background colors for list items
  27. Styling HTML email for Gmail
  28. Why would Google use a font tag?
  29. Styling the “ element in CSS?
  30. inline-block element with no text renders differently

Leave a Comment