CODEWITHSUNDEEP
htmlcss
Bigman
Bigman

Reputation: 1473

How to make element occupy remaining width of container?

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

Upvotes: 1

Views: 988

Answers (5)

Shikkediel
Shikkediel

Reputation: 5205

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

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371231

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:

Upvotes: 1

Leo
Leo

Reputation: 13838

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.

Upvotes: 1

Jon
Jon

Reputation: 2671

I think you want to do:

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

Upvotes: 0

Alex
Alex

Reputation: 8695

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

link

Upvotes: -1

Related Questions