Div width equal to gap between two other divs - html

Question

I have several divs in a container, organized in a row.
$(document).ready(function() {
$('#swap').click(function() {
$('#container').find('div.blue').each(function() {
$(this).removeClass('blue');
$(this).addClass('green');
});
});
});
#container {
border: 1px solid black;
border-right: 0px;
width: 500px;
min-height: 40px;
}
#left {
float: left;
}
#right {
float: right;
}
.purple {
background-color: #9471AB;
width: 70px;
}
.red {
background-color: #D48A8A;
width: 40px;
}
.green {
background-color: #A4B995;
width: 50px;
}
.blue {
background-color: #95AEB9;
width: 75px;
}
.red,.green,.blue,.purple {
height: 40px;
float: left;
box-sizing: border-box;
border-right: 1px black solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<div id="left">
<div class="purple">
</div>
<div class="purple">
</div>
<div class="purple">
</div>
</div>
<div id="middle">
<div class="red">
</div>
</div>
<div id="right">
<div class="blue">
</div>
<div class="blue">
</div>
<div class="green">
</div>
</div>
</div>
<br/>
<button id="swap">Swap</button>
.purple, .blue, .green are defined widths, but not .red. For this example, I've given it a width.
I'd like .red to have a width equal to the gap between #left and #right. I could put it underneath all of them and make the width equal to container width, but I'm looking for something that's friendly with text.
I've put a button that changes all .blue to .green. .red should stretch its width accordingly so there's no gap. Some scenarios might have two .green and one .blue on the right, some might be three .blue or three .green., etc. It should be dynamic and not calculated against the width of other classes.

Answer 1

flexbox solution
$(document).ready(function() {
$('#swap').click(function() {
$('#container').find('div.blue').each(function() {
$(this).removeClass('blue');
$(this).addClass('green');
});
});
});
* {
box-sizing: border-box;
}
#container {
border: 1px solid black;
border-right: 0px;
width: 500px;
margin: 10p auto;
display: flex;
justify-content: space-between;
}
#left {
display: flex;
}
#middle {
display: flex;
flex:1;
}
#right {
display: flex;
}
.purple {
background-color: #9471AB;
width: 70px;
}
.red {
background-color: #D48A8A;
flex:1;
}
.green {
background-color: #A4B995;
width: 50px;
}
.blue {
background-color: #95AEB9;
width: 75px;
}
.red,.green,.blue,.purple {
height: 40px;
border-right: 1px black solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="left">
<div class="purple">
</div>
<div class="purple">
</div>
<div class="purple">
</div>
</div>
<div id="middle">
<div class="red">
</div>
</div>
<div id="right">
<div class="blue">
</div>
<div class="blue">
</div>
<div class="green">
</div>
</div>
</div>
<br/>
<button id="swap">Swap</button>

Answer 2

Update
http://jsfiddle.net/w4rxg7v3/1/
This approach lets you have dynamic widths of left and right, and middle fills in the rest.
<div class="middle">
<div class="left"></div>
<div class="right"></div>
<p>Content for Middle: cupiditate blanditiis dolorum natus!</p>
</div>
============================================================
http://jsfiddle.net/w4rxg7v3/
You can accomplish this using float and calc().
Make 1st div float:left, right div to float:right, then make middle one float either left or right. Then set its width to calc( 100% - sumofwidthothertwodivs)
body {
min-width: 500px;
}
.left,.middle,.right {
height: 80px;
}
.left {
background-color: blue;
width: 200px;
float: left;
}
.middle {
width: calc( 100% - 400px ) ;
float: right;
background-color: red;
}
.right {
background-color: green;
float: right;
width: 200px;
}