How to place 2 spans beside each other with full width with CSS

Tags: html,css

Problem :

in my custom file manager I want to show truncated filenames. It's important to see the beginning and the ending, so just overflow:ellipsisdoesn't do the work.

The tiles where the filename is shown can change their width (inside bootstrap columns). They are rendered with handlebars, so I can manipulate the String before it's rendered (witch a helper). After that, I don't want to use javascript anymore (e.g. eventlisteners which listen to resize)

My Idea: Splitting the string of the filename (regex) while the tile is rendered. So "long_filename_with_number_at_the_end_001.jpg" becomes ["long_filename_with_number_at_the_end_","001.jpg"].

Now I want to include these strings in two spans inside a parent div, while the right span is as large as needed. and the left span fills the rest. The left span shall get the text-overflow:ellipsis property.

I found this answer, which is quite near to mine. I changed a little bit, but I did't get what I expected.

* {
    position: relaitve;
.outer {
    width: 110px;
    height: 22px;
    border: 1px solid #ccc;
#colA {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
#colB {
    background: pink;
<div class="outer">
    <div id="colA">long_filename_foo_bar</div>
    <div id="colB">001.jpg</div>

Solution :

Just switch #colA and #colB in your html document.

<div class="outer">
    <div id="colB">001.jpg</div>
    <div id="colA">long_filename_foo_bar</div>


    CSS Howto..

    How to have a background image wider than the content area of a website (without scrollbars)

    How to make this css code (counters and ;before) cross browser compatible using jquery?

    HTML/CSS - How do I fix width:100% cutting off when the content creates a horizontal scroll bar?

    How to make bootstrap 3 navbar not wrap

    How can I print the selected item from bootstrap drop down using jquery or javascript in php

    How can I properly add CSS and JavaScript to an HTML document?

    How can I take advantage of Sass, for example, in rendering FizzBuzz?

    How to position three divs horizontally

    How can I get the current state of my div animation?

    How to make balloon textbook talking style using css

    How to force elements to be in middle?

    How do I get a zooming effect on an image when a user hovers over it? [closed]

    how to align divs with different width within another parent div?

    JavaScript or CSS: How can I make a transition of one element to another?

    How do I disable position:fixed in web pages?

    How to use CSS in ASP.NET application

    How do I pick an image from a set of images on my Ajax form?

    How to utilize CSS only button markup?

    How to set line spacing of an ordered list consistently across browsers?

    How to create responsive text on top of an image?

    How to change my online store template in dbdirector ecommerce platform

    CSS display: table - How can I line up two cells to be in the center of another DIV using display: table?

    CSS: How to clear a floating object only one level, not the all the way to the left?

    How to remove the background in a slick carousel?

    How to prevent (bootstrap) fixed top navigation from zooming on mobile

    How to change class of valid form field - jQuery form validation plugin

    HTML/CSS - Input [Text] How to disable the browser from offering suggestings in the Dropdown?

    How to target flex item by its order number?

    How to match element containing another element?

    How to change a button data-icon size