How to make element occupy remaining width of container? - html

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;
}

Answer 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

Answer 2

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.

Answer 3

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;
}

Answer 4

I think you want to do:
.def {
width: calc(100% - 100px)
}

Answer 5

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