css - How do I keep a div from wrapping, when the div aligned to it can vary in it's width? -

i have simple setup. div contains title , titleoptions.

the title long , have ellipsis instead of showing full title. right of title titleoptions. these can vary. delete, edit , move, few those, none. (the title width therefore cannot fixed, since titleoptions vary).

how have 1 line title , titleoptions. don't want wrap ever, or push titleoptions below.

i prefer titleoptions width fluid, since allow longer title have more real estate.

here fiddle better explanation: http://jsfiddle.net/k8s3z/1

you can use flexbox.

.titlebar {     width:980px;     overflow:hidden;     border: 1px solid #eee;     margin-bottom:2em;     display: -webkit-flex; } .title {     border: 1px solid #ddd;     white-space:nowrap;     overflow: hidden;     text-overflow: ellipsis;     -webkit-flex: 1; }  .titleoptions {     white-space:nowrap;     border: 1px solid #ddd; } 

fiddle (which has other syntax , prefixes needed, etc).

---

with js if flexbox not available

function getbyclassname(collection, classname) {     var = collection.length;     var regexp = new regexp('\\b' + classname + '\\b');     var returnset = [];     while ( i-- ) {         if ( collection[i].classname.match(regexp)  ) {             returnset.push(collection[i]);         }     }     return returnset; } if ( ! modernizr.flexbox && ! modernizr.flexboxlegacy ) {     var bars = document.queryselectorall('.titlebar');     (var = 0, l = bars.length; < l; ++i) {         var bar = bars[i];         var divs = bar.getelementsbytagname('*');         var optwidth = getbyclassname(divs, 'titleoptions')[0].offsetwidth;         getbyclassname(divs, 'title')[0].style.width = bar.offsetwidth - optwidth + 'px';     } } 

the fiddle has custom functions checking flexbox (based on modernizr) if don't want use modernizr (for reason). assigning responses local object modernizr in fiddle. also, no jquery, in case have aversion well. both easy replace in here, if you're using them.