How to make element occupy remaining width of container?

Question

I have an inline div abc and another inline div def. abc's width is 100px. How can I let def appear on the right while def's width is its parent's width minus 100px?

I cannot do width:100%; since def would appears next line.

https://jsfiddle.net/h7k87vwx/

<div class="abc">abc</div>
<div class="def">def</div>
<div class="ghi">ghi</div>

.abc {
    display:inline-block;
    background-color:lightblue;
    width: 100px;
}

.def {
    display:inline-block;
    background-color: lightyellow;
    width: 200px;
}

...Just for clarifications, you want the "def"'s width to be the body's width minus 100px? — frosty, Oct 10 '15 at 03:18
http://stackoverflow.com/questions/16529291/div-to-take-up-entire-remaining-width — Khanh TO, Oct 10 '15 at 03:39

score 1 · Accepted Answer · edited May 23 '17 at 12:15

1

HTML

<div class="abc">abc</div><div class="def">def</div><div class="ghi">ghi</div>

CSS

.def {
    display: inline-block;
    background-color: lightyellow;
    width: calc(100% - 100px);
}

DEMO: https://jsfiddle.net/h7k87vwx/6/

Divs are lined up together to eliminate rendered white space. For an explanation see my answer here:

inline-block boxes not fitting in their container

edited May 23 '17 at 12:15

Community

1
1

answered Oct 10 '15 at 04:12

Michael Benjamin

346,931
104
581
701

Didn't even see this answer (or that it was accepted already) before I posted mine... not making line breaks in the document would indeed be another way the eliminate the white space. – Shikkediel Oct 10 '15 at 05:08

Leo · Answer 2 · 2015-10-10T04:19:33.193

1

Here's an old trick that was commonly used in holy grail layout:

.abc {
    float: left;
    background-color:lightblue;
    width: 100px;
}

.def {
    padding-left: 100px; /* margin-left also applies */
    background-color: lightyellow;
}

Check out the fiddle.

edited Oct 10 '15 at 04:19

answered Oct 10 '15 at 04:14

Leo

13,428
5
43
61

Shikkediel · Answer 3 · 2015-10-10T04:59:44.663

Inline-block elements will have an empty space between them, one way to address this is to give them a negative margin. That will make it not be placed below. Another detail would be to keep an empty space in between the different values and the operator with calc() otherwise it will not work :

https://jsfiddle.net/t0ecucgw/

.abc {
    display: inline-block;
    background-color: lightblue;
    width: 100px;
}

.def {
    display: inline-block;
    background-color: blue;
    width: calc(100% - 100px);
    margin-left: -4px;
}

score 0 · Answer 4 · edited Oct 10 '15 at 04:02

0

I think you want to do:

.def {
    width: calc(100% - 100px)
}

edited Oct 10 '15 at 04:02

Andy

49,085
60
166
233

answered Oct 10 '15 at 03:37

Jon

2,456
21
28

https://jsfiddle.net/h7k87vwx/3/ it won't work. I want "def" to cover the rest of its line, not just cover those three characters. – Bigman Oct 10 '15 at 04:05
I answered this correctly before everybody, yet somehow I am at the bottom :(. – Jon Oct 13 '15 at 16:50

score -1 · Answer 5 · answered Oct 10 '15 at 03:23

-1

.def {
    float:right;
    background-color: lightyellow;
    width: 200px;
}

link

answered Oct 10 '15 at 03:23

Alex

8,461
6
37
49

This floats it to the right. but I want the width not to be 200px, but (body width - abc's width) – Bigman Oct 10 '15 at 04:09

How to make element occupy remaining width of container?

5 Answers5