Let's say I have 7 divs of which I have several of fixed width, and the others should take a portion of remaining width.
Example:
<li>
<div id="1">Should take 20%</div>
<div id="2">Should take 30%</div>
<div id="3" style="width:2em">Something</div>
<div id="4" style="width:1em"> / </div>
<div id="5" style="width:2em">Something</div>
<div id="6">Should take 30%</div>
<div id="7">Should take 20%</div>
</li>
Okay, each div should have display:inline-block; or display:table-cell;. Divs 1, 2, 6, 7 totalize 100% of the "remaining place", as 3, 4 and 5 will take a fixed width.
How could I achieve this ?
It is important that div id 7 takes the size until the right bound because the text should be aligned to the right.
Best How To :
Here is one approach if you are willing to change the HTML mark-up.
Use display: table on the parent .wrap element and define three child cells, the left and right will have width 50%. Each of these three child cells will contain a nested CSS table, .cwrap.
You can then use display: table-cell on the inner most elements and assign widths of 20% and 30% as needed.
The middle cell will adjust as needed depending on content.
.wrap, .cwrap {
width: 100%;
border: 1px dotted blue;
display: table;
}
.c1 {
display: table-cell;
width: 50%;
border: 1px dotted gray;
}
.c2 {
display: table-cell;
border: 1px dotted gray;
}
.cc1 {
display: table-cell;
width: 20%;
border: 1px dotted gray;
}
.cc2 {
display: table-cell;
width: 30%;
border: 1px dotted gray;
}
<div class="wrap">
<div class="c1">
<div class="cwrap">
<div class="cc1">Should take 20%</div>
<div class="cc2">Should take 30%</div>
</div>
</div>
<div class="c2">
<div class="cwrap">
<div class="cc3">Something</div>
<div class="cc4"> / </div>
<div class="cc5">Something</div>
</div>
</div>
<div class="c1">
<div class="cwrap">
<div class="cc2">Should take 30%</div>
<div class="cc1">Should take 20%</div>
</div>
</div>
</div>
