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

Question

What I am trying to accomplish is having a fixed-width first div and a fluid second div which will fill up the rest width of the parent div's width.

<div class='clearfix'>
  <div style='float:left; width:100px;'>some content</div>
  <div style='float:left'>some more content</div>
</div>

and on this one everything seems alright and fluid.

<div style='display:table'>
  <div style='display:table-cell; width:100px;'>some content</div>
  <div style='display:table-cell'>some more content</div>
</div>

I want to go ahead with the second one but i feel like the second example will give me headaches in the future.

Could you offer some suggestions or insights?

Lumpy

width on cells don't work right? is it working? – Rucksack

Answer 1

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/)

Hindi

+1 for the reference to caniuse.com, which I hadn't heard of, and which appears to be awesome. – Hoopoe

An IE7-only stylesheet would be appropriate to use in this situation. Let the ugly old browser use float:left and everyone else use display: table-cell. – Andorra

+1 for the alternative (float:left + overflow:hidden). Also explained here. – Diorama

I like this technique a lot. The only problem I've ever had was when I was trying to position something with position:absolute; inside of a table-cell element. It didn't work on IE8 and I don't remember if we had the same problem with IE9. But aside from that, I've never had any problems. – Mellar

what about mobile devices support? – Goddart

Answer 2

You could do something like this. It puts your main content first. You can use a vertically repeating css background image on your main "content" container to create the illusion of a background running all the way down the left column.

<div id="content" style="clear:both;">
    <div id="mainwrap" style="float:left; width:100%;">
        <div id="main" style="margin-left:100px">
            Main content here
        </div>
    </div>
    <div id="leftnav" style="float:left; width:100px; margin-left:-100%;">
        Left content here
    </div>
</div>

To extend to a 3-column with fluid center:

<div id="content" style="clear:both;">
    <div id="mainwrap" style="float:left; width:100%;">
        <div id="main" style="margin-left:100px; margin-right:100px;">
            Main content here
        </div>
    </div>
    <div id="leftnav" style="float:left; width:100px; margin-left:-100%;">
        Left content here
    </div>
    <div id="rightnav" style="float:left; width:100px; margin-left:-100px;">
        Right content here
    </div>
</div>

Calore

this is a bit hacky, would like to continue with table props. thx. – Lumpy

It may not look pretty, but it works well for us. Obviously we do not leave the styles attached in the HTML...we use stylesheets. I put them in the code above for brevity. we use it because it has wide browser support and allows pushes our "important" content higher up in the page for SEO purposes. Does anyone know if using the table CSS classes results in the same type of rendering delays that tables do (a table needs to load all content before displaying entire table)? – Calore

i kept inline styles to make the question more understandable and shorter, your way is the way to go with classes of course. I don't know about that display issue, but with a bit of logical thinking, using divs with table props won't cause such an issue because a table needs to load until closing </table> tag for browser to understand the layout. It shouldn't be the case with divs. – Lumpy

If you use this method, you'll have to fake equal length columns using a background image on the containing div. – Runnerup

Theres also a trick of adding a very large bottom padding and a very large negative bottom margin. positioniseverything.net/articles/onetruelayout/equalheight – Calore

Answer 3

To get the first example working, you should also float the containing div, this will make sure that both of the elements within sit as you would expect within it. Not really sure what you mean by 'is a pain', though?

Provisory

Answer 4

One down side of using table-row (very related to the OP) is that you can't use margin/padding on a row.

Tifanytiff