A stretchy div between other divs on one line.

stretchy_div.html

<!-- How to have a div stretch between divs on the left and right. Useful e.g. for -->
<!-- Bootstrap navbar et al. -->
<style>
.inner-navbar {
  border: 2px solid black;
  padding: 5px;
  width: 100%;
}

.left {
  float: left;
}

.red{
  border: 2px solid red;
}

.green{
  border: 2px solid green;
}

.blue{
  border: 2px solid blue;
}

.right{
  float: right;
}
</style>
<div class="inner-navbar">
  <div class="red left">Red</div>
  <div class="green left">green</div>
  <div class="green right">green</div>
  <!-- this last div is the one that won't float and will be stretched -->
  <div class="blue">blue</div>
</div>