Yet another "fill remaining width" question

[Aeonix]

I have two items that look like this

span.left {
    float: left;
    display: inline-block;
    /* Take space neccessary */
}

span.middle {
    /* Take free space only, do not push unless allowed */
    /* Contains couple lines of text */
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
}

span.right {
    /* Take space neccessary */
    float: right;
    display: inline-block;
}

Unlike previous request. This one can't use flexbox and can't be reliant on JavaScript.

span.left and span.right are both elements that are allowed to widen up as much as they want while.
span.middle has to shrink if forced and grow if it's allowed (by it's remaining width).

I tried to the typical float: X and width: 100%; trick, but span.right didn't make it to the first line and ended up being below span.middle on the right side.

Oh, and I forgot, span.left and span.right can be of flexible length.

[gentlemedia]

That is not possible without using flexbox, grid or javascript. If you use floats or inline-block, you'll need to set dimensions.
You can get half of what you want by using calc() :)

http://codepen.io/gentlemedia/pen/qqjRpy

And mixing floats and inline-block on the same element is redundant, because inline elements, such as a span, become automatically block-level elements (display: block) once you float them.

[Aeonix]

No............. I'll have to change lay-out of "the thing".

How about another way, is it possible to bring two items on the left, and then have span.middle "fill" the remaining space on right?

[gentlemedia]

How about another way, is it possible to bring two items on the left, and then have span.middle "fill" the remaining space on right?

No, with old fashioned CSS 2.1 it is not possible. That's why we have now flexbox and in the future grid at our disposal. Do you really have/want to support IE9 and below? Or serve modern browsers that supports flexbox your fancy layout and those who don't floats by using feature detection such as Modernizr.

[Aeonix]

Do you really have/want to support IE9 and below?

Not really. But I also don't want to spam flexbox's left and right. And the caniuse also says that there are more people using IE 9 than IE 10. If I already drop IE 9, I might as well drop IE 10, which makes it look bad. Just supporting 11, 12, 13 and Edge, (grunt).

I guess I'll have to :(, oh well, thanks for your help.

[rproffitt]

I have no problem dropping end of life IE versions. I mean, these ended quite a while ago.
https://support.microsoft.com/en-us/kb/3123303

This of course caused the Windows XP users to trigger.