I have a container which wraps around three floated containers, the wrapping container has

Question

0

Asked: June 3, 20262026-06-03T02:42:09+00:00 2026-06-03T02:42:09+00:00

I have a container which wraps around three floated containers, the wrapping container has

0

I have a container which wraps around three floated containers, the wrapping container has a variable width and the left most inner container has a width of 100px and the right most inner container has a width of 500px. The center container does not have a set width, but should take up as much space as possible that remains.

<style type="text/css">
    #outerContainer div:nth-child(1) {float: left; width: 100px}
    #outerContainer div:nth-child(2) {float: left}
    #outerContainer div:nth-child(3) {float: right; width: 500px}
</style>

<div id="outerContainer">
    <div>left most inner container</div>
    <div>center container</div>
    <div>right most inner container</div>
</div>

The dynamic center container has a few styles applied to it which make it’s content overflow: hidden and ellipsis for presentation purposes.

<style type="text/css">
#outerContainer div:nth-child(1) {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
</style>

I’m not sure what the solution is to dynamically scale the width of this inner element using ONLY css. Here’s my JavaScript solution which works, but I’d like to cut it out as it seems excessive.

NS.textWidth = function(sourceSel){
    var sourceSel = sourceSel,
        html_org = $(sourceSel).html(),
        html_calc = '<span>' + html_org + '</span>';

    //Wrap contents with a span.
    $(sourceSel).html(html_calc).css({width:'100%'});
    //Find width of contents within span.
    var width = $(sourceSel).find('span:first').width();

    //Replace with original contents.
    $(sourceSel).html(html_org);

    return width;
};

adjustContainerWidth();

$(window).bind('resize', function(e){
    clearTimeout(c.resize_timeout);

    c.resize_timeout = setTimeout(function() {
        adjustContainerWidth();
    }, 200);
});

function adjustContainerWidth() {
    var winW = parseInt($(window).width());
    var firstContainer = parseInt($('#outerContainer div:nth-child(1)').width());
    var lastContainer = parseInt($('#outerContainer div:nth-child(3)').width());
    var availW = winW - firstContainer - lastContainer;
    var textW = NS.textWidth('#outerContainer div:nth-child(2)');

    if (availW > 40 && availW < textW) {
        $('#outerContainer div:nth-child(1)').css({ width : availW + 'px' });
    } else {
        $('#outerContainer div:nth-child(1)').css({ width : textW + 'px' });
    }
}