If I want a div to fill the space between two others, I can do the following, and the overflow:auto on the container of the centre div causes it to fill the space. However large or small (within reason!) the page is, the three divs stay joined - that's great.
<div style="height:150px;width:150px;background-color:red;float:left;">Left Box</div>
<div style="height:150px;width:150px;background-color:green;float:right;">Right Box</div>
<div style="overflow:auto;">
<div style="background-color:blue;height:10px;margin-top:50px;width:100%"></div>
</div>However, if I have divs with relative positions, how do I achieve the same - how do I get the centre blue div to fill the space?
<div style="height:150px;width:150px;background-color:red;float:left;">Left Box</div>
<div style="height:100px;width:100px;background-color:pink;float:left;position:relative;left:-50px;margin-top:25px;">Left Overlap Box</div>
<div style="height:150px;width:150px;background-color:green;float:right;">Right Box</div>
<div style="height:100px;width:100px;background-color:lime;float:right;position:relative;right:-50px;margin-top:25px;">Right Overlap Box</div>
<div style="overflow:auto;">
<div style="background-color:blue;height:10px;margin-top:100px;width:100%"></div>
</div>I found if I add position:relative;left:-50px; to the container for the blue div I can move it to the left, so that's step one. Now I need to increase it's width by that 50px that I moved it and by another 50px for the gap on the other side.
I thought that I could add width: calc(100% +100px); to the container for the blue div to deal with that, but this doesn't work, see below.
<div style="height:150px;width:150px;background-color:red;float:left;">Left Box</div>
<div style="height:100px;width:100px;background-color:pink;float:left;position:relative;left:-50px;margin-top:25px;">Left Overlap Box</div>
<div style="height:150px;width:150px;background-color:green;float:right;">Right Box</div>
<div style="height:100px;width:100px;background-color:lime;float:right;position:relative;right:-50px;margin-top:25px;">Right Overlap Box</div>
<div style="overflow:auto;position:relative;left:-50px;width: calc(100% +100px);">
<div style="background-color:blue;height:10px;margin-top:100px;width:100%"></div>
</div>What am I missing? Need a CSS only solution.
Instead of left:-50px and right:-50px, you could use margin-left:-50px and margin-right:-50px, so the DOM position matches their visuals.
<div style="height:150px;width:150px;background-color:red;float:left;">Left Box</div>
<div style="height:100px;width:100px;background-color:pink;float:left;position:relative;margin-left:-50px;margin-top:25px;">Left Overlap Box</div>
<div style="height:150px;width:150px;background-color:green;float:right;">Right Box</div>
<div style="height:100px;width:100px;background-color:lime;float:right;position:relative;margin-right:-50px;margin-top:25px;">Right Overlap Box</div>
<div style="overflow:auto;">
<div style="background-color:blue;height:10px;margin-top:100px;width:100%"></div>
</div>