Filling the available space with display:table-cell

Question

Is it possible to avail the second div to occupy the available space of the parent div without specifying manual width?

Here is the Fiddle for the tried demo.

.right_cnt {
    display: table-cell;
    background:#FFC;
}

NOTE: I need yellow box to occupy the available right space.

from your fiddle it looks like it already occupies the avaiable space on the right, and it doesn't look like you've maunually specified width anywhere — Danield, Feb 27 '13 at 09:17
Is this is the thing you need : http://jsfiddle.net/JqHXJ/3/ OR this : http://jsfiddle.net/JqHXJ/4/ OR this : http://jsfiddle.net/JqHXJ/5/ — Pandian, Feb 27 '13 at 09:17

score 7 · Accepted Answer · answered Feb 27 '13 at 09:14

7

Set display:table; width: 100%; on the parent element, remove float: left from the sibling. http://jsfiddle.net/byNpM/2/

answered Feb 27 '13 at 09:14

Tetaxa

4,375
1
19
25

I didn't find any difference. I need that yellow box to occupy the available right part – Sowmya Feb 27 '13 at 09:16

score 1 · Answer 2 · answered Feb 27 '13 at 09:19

1

It is possible to use table layout to do this, but it's not necessarily the easiest way: forked your fiddle to demonstrate.

An easier way is to modify the second cell to remove all table display properties and set the second element's overflow to hidden: another fork demonstrating this. zoom: 1 allows the technique to work in old IE. This might be simpler for your purposes, if you're happy with the side-effects of the overflow

answered Feb 27 '13 at 09:19

Barney

16,181
5
62
76

3

"Forked your fiddle"... crikey. – Matt Fletcher Jun 06 '16 at 11:02

score 1 · Answer 3 · edited May 23 '17 at 12:01

1

This post might might be what you are looking for.

In particular look at Xanthir's answer:

The solution to this is actually very easy, but not at all obvious. You have to trigger something called a "block formatting context", which interacts with floats in a specific way. ... ...

edited May 23 '17 at 12:01

Community

1
1

answered Feb 27 '13 at 09:24

Danield

121,619
37
226
255

score 0 · Answer 4 · answered Nov 08 '16 at 22:02

It appears to me that, while display:table-cell on the last div in a row with no width will cause it to stretch to fill the enclosing parent display:table div, the table-cell has an implicit 'min-width' behaviour that can't be turned off, forcing it to be the width of its child.

I had to resort to absolute-positioning the left cell on top of a wide padding on a 100% wide right cell. With this, the 100% wide inner div shrinks as required when the window is narrowed and the content scrolls.

http://jsfiddle.net/kmbro/cqkzbc4a/

I should have read Danield's answer - putting float:left on the left div and overflow:auto on the right does the trick! Fiddle updated to demonstrate. — kbro, Nov 08 '16 at 22:29

Filling the available space with display:table-cell

4 Answers4