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