Member Avatar for 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.

Edited by Aeonix
  • 3 Contributors
  • 5 Replies
  • 341 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by rproffitt
Member Avatar for 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.

Edited by gentlemedia
Member Avatar for 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?

Edited by Aeonix
Member Avatar for 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.

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.