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?

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

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>