Q:

How can I fill the space between a left and right float without making the right float wrap?

What I want to achieve is for all the elements to be on the same line, but have the text-overflow kick in if the paragraph in the middle is wider than the available space, but if not, then the right float should still be in the same line.
Codepen: http://codepen.io/anon/pen/hHvCA
HTML:
<div id="outer">
  <div id="left"></div>
  <div id="middle">
    <p>Can this paragraph fill the space between the left and right floats without making the right float wrap?</p>
  </div>
  <div id="right"></div>
</div>

CSS:
#outer {
  background-color: #222;
  height: 100px;
  width: 100%;
}

#left {
  background-color: #555;
  width: 100px;
  height: 100px;
  float: left;
}

#right {
  background-color: #777;
  width: 200px;
  height: 100px;
  float: right;
}

#middle {
   background-color: #999;
   height: 100px;
}

#middle > p {
   line-height: 100px;
   color: #eee;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   font-family: monospace;
}

A:

Use a 
float: left

on the #middle one. Also, try setting a width, to avoid the middle div spanning to 100%

