There is a wrapping container that contains three floated containers inside. The width of the wrapping container is variable. The inner container on the left has a width of 100px, and the inner container on the right has a width of 500px. The center container does not have a fixed width and should take up the remaining space.
<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 center container has some styles applied to it to hide overflow and add ellipsis for better presentation.
<style type="text/css">
#outerContainer div:nth-child(1) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
Looking for a CSS-only solution to dynamically adjust the width of the center container. Below is a JavaScript solution that's currently being used, but it seems too complex.
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' });
}
}