17

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?

Sinan
  • 11,443
  • 7
  • 37
  • 48

4 Answers4

31

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

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • 1
    +1 for the reference to caniuse.com, which I hadn't heard of, and which appears to be awesome. – Kalessin Jun 10 '11 at 15:26
  • An [IE7-only stylesheet](http://css-tricks.com/how-to-create-an-ie-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`. – Blazemonger Apr 18 '12 at 15:43
  • +1 for the alternative (float:left + overflow:hidden). Also explained [here](http://stackoverflow.com/a/1767270/1183010). – R. Oosterholt Aug 27 '14 at 19:50
  • 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. – Jair Reina Nov 27 '15 at 00:03
  • what about mobile devices support? – siddhesh Jul 09 '17 at 07:45
1

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>
Sam
  • 9,933
  • 12
  • 68
  • 104
  • this is a bit hacky, would like to continue with table props. thx. – Sinan Jun 10 '11 at 15:47
  • 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)? – Sam Jun 10 '11 at 16:17
  • 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 `` tag for browser to understand the layout. It shouldn't be the case with divs. – Sinan Jun 10 '11 at 16:38
  • If you use this method, you'll have to fake equal length columns using a background image on the containing `div`. – rxgx Dec 30 '11 at 09:22
  • Theres also a trick of adding a very large bottom padding and a very large negative bottom margin. http://www.positioniseverything.net/articles/onetruelayout/equalheight – Sam Dec 31 '11 at 01:51
0

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

rob_james
  • 1,262
  • 1
  • 12
  • 17
0

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?

cchana
  • 4,899
  • 3
  • 33
  • 43