Lets say I have defined a set of floats that start out wide, become narrower as you go down the page, and then become wider again, creating a sort of hourglass shape (well, one half of an hour glass, split down the middle).

Now if I add content to the container of these floats, I would expect that the content flows fully around all of the floated elements and fills the “valley” in the middle of hour glass.

However, as you can see in this example, the content does not fully fill the “valley” and seems to stop at some seemingly arbitrary halfway point.

Is this expected behavior (and is there any way to force the behavior I want?)

Here is a demo of content not fully flowing to the furthest float:

https://jsfiddle.net/nv9th230/2/

HTML:

<div class="main">
<div>

</div>
  <div class="float size1">
    float
  </div>
  <div class="float size2">
    float
  </div>
  <div class="float size3">
    float
  </div>
  <div class="float size4">
    float
  </div>
  <div class="float size5">
    why doesnt content touch me
  </div>
  <div class="float size4">
    float
  </div>
  <div class="float size3">
    float
  </div>
  <div class="float size2">
    float
  </div>
  <div class="float size1">
    float
  </div>
  <div class="content">
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
    This is the content. Why does the content not flow all the way to the left.
    Instead of going all the way to the left, it stops short.
  </div>
</div>

CSS:

  width: 1000px;
  clear: both;
}

.float {
  float: left;
  background-color: blue;
  height: 100px;
  clear: both;
}


.size1 {
  width: 400px;
}
.size2 {
  width: 300px;
}
.size3 {
  width: 200px;
}
.size4 {
  width: 100px;
}
.size5 {
  width: 70px;
  color: #fff;
  padding: 8px;
}

.size1 {
  width: 400px;
}
.size2 {
  width: 300px;
}
.size3 {
  width: 200px;
}
.size4 {
  width: 100px;
}
.size5 {
  width: 50px;
}

.content {
  height: 100px;
}