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?

Improve this question
1
  • width on cells don't work right? is it working? Commented Dec 1, 2014 at 17:32

4 Answers 4

Reset to default
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/)

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

+1 for the reference to caniuse.com, which I hadn't heard of, and which appears to be awesome.
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.
+1 for the alternative (float:left + overflow:hidden). Also explained here.
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.
what about mobile devices support?
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>
Improve this answer

5 Comments

this is a bit hacky, would like to continue with table props. thx.
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)?
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.
If you use this method, you'll have to fake equal length columns using a background image on the containing div.
Theres also a trick of adding a very large bottom padding and a very large negative bottom margin. positioniseverything.net/articles/onetruelayout/equalheight
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?

Improve this answer

Comments

0

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.