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 n

Solution 1:

Use a

float: left

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

Solution 2:

As discussed in the comments below, your best bet is to use a proper grid system. Twitter Bootstrap has two great choices Default Grid System and Fluid Grid System. In addition, you can package Bootstrap from their website to only include the modules you need.

Otherwise, with the typo in # middle fixed, you can use float: left on #middle to make #right not wrap. You will also need to use JavaScript to set the width on #middle based on screen-size, or you risk the text being too long and pushing #right down again. A solution is easier to accomplish with a grid system!

I wrote the JS to work on window.onload, you could also do on a resize.

Modified code: http://codepen.io/anon/pen/xfwJi

Solution 3:

One Answer :

#middle {
   background-color: #999;
   height: 100px;
   float:left;
   width:1364px;
}

Solution 4:

try floating the middle div to left as well. That should work.

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

Solution 5:

Here is a fiddle. Check it out, it pretty much solves your problem.

Moreover, I would like to suggest you using a grid system as it will help you in making the website in a lot more easier way with very or no little problems!

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;
    margin-top: -100px;
}

#middle {
   background-color: #999;
   height: 100px;
    width: 72%;
    float:left;
}

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

Take a look at this site, provides 10 CSS grid systems! :)