How to place two divs side by side where LEFT one is sized to fit and other takes up remaining space?

Question

I'm trying to place two div's beside each other with the following criteria:

1. Both divs must stay on the same line.
2. Priority must be given to the left div. As much text as possible should be displayed in the left div up to the point where ellipsis is used in case of overflow.
3. The right div's text should be right aligned. In the case of overflow, ellipsis should be used.
4. Text is dynamic, so no percentages or fixed widths can be used.
5. Only needs to work on webkit based browser, so CSS3 solution is preferred.

Here are some sample images of how it would look:

Input

<div class='left'>I should always fit. If not, ellipsis should be used.</div><div class='right'>Right align and fit me if space available here.</div>

Output

Input

<div class='left'>I should always fit. If not, ellipsis should be used. And some more text and more, and more text.</div><div class='right'>Right align and fit me if space available here.</div>

Output

Input

<div class='left'>This text is left aligned.</div><div class='right'>This text is right aligned.</div>

Output

Valero

Answer 1

I have it with the exception that when there is empty space my right div is eating it (with text right aligned). You don't list that as an ask, so I was unsure if it was just how you drew it? Fiddle here: http://jsfiddle.net/mdares/fSCr6/

HTML:

<div class="container">
    <div class="left">Some Text, Repeat, Repeat, Repeat, ,Some Text, and then: </div>
    <div class="right">other Text ttt other Text tttother Text tttother Text ttt</div>
</div>

<p />

<div class="container">
    <div class="left">Some Text, Repeat, Repeat, Repeat, ,Some Text, Some Text, Repeat, Repeat, Repeat, ,Some Text,</div>
    <div class="right">other Text ttt other Text tttother Text tttother Text ttt</div>
</div>

<p />

<div class="container">
    <div class="left">Some Text, Repeat, Repeat, Repeat, ,Some Text, </div>
    <div class="right">other Text ttt</div>
</div>

CSS:

.container {
    width: 600px;
}
.left {
    max-width: 100%;
    background:red;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -ms-text-overflow:ellipsis;
    float: left;
}
.right {
    background:yellow;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -ms-text-overflow:ellipsis;
    text-align: right;
}

And finally:

Fairfield

Hi Matthew, that looks very good indeed. I can add a single white space character in between the two of them to solve the space issue that you mention. As I don't want to use fixed widths I've tested it without the "width: 600px" on the container element and it appears to work nicely. It works perfectly in Chrome, however, on Safari when the right div is pushed completely off the view it (i.e. the right div) wraps on to the next line. Is it possible to fix this? – Valero

The container is just to simulate whatever it is that will contain these to divs - i.e. was not meant to be part of the solution just simulate the page these are in. As for Safari - I think I have it installed at work and will try and see what is up there. – Fairfield

Ok - reproduced. I didn't see it as it only happens when the container doesn't have a fixed size (figures). And only when you resize (a refresh will make it look correct again). Trying to sort it out now. – Fairfield

Ok - tried a couple of things and I don't see any CSS only way to handle a window resize without a fixed size on the container. It works for me ok in Safari if the page starts out smaller than the width of the left div. You could do this in JS using something like: $(window).resize(function(){ $('#right').width($(window).width() - $('#left').width()); }); – Fairfield

Hi Matthew, I'm going to accept your answer as it works when the page it loaded and meets all criteria as originally stated in the question. On a window resize on Safari it is broken as the text wraps onto the next line. I don't think that this will be an issue in practice as this is intended for a mobile browser which you can't resize. Just out of curiosity and to better my understanding, do you have any idea why the text is wrapping on a resize? – Valero

PS for the benefit of other readers you can use a   to create a space between the divs. – Valero

Try using word break for the divs and whitwe space no wrap for container. – Partin

@Partin Doesn't correct it for me either. Also, Philip: No idea why it is doing it, played with it some more and I couldn't meet your other conditions and prevent the div from dropping down with CSS alone. – Fairfield

@Partin Fiddle or it didn't happen? :) – Fairfield

@Fairfield FYI, I tried using your suggested JS to stop the wrap from happening, but that doesn't stop it - fiddle: jsfiddle.net/philipjmurphy/fSCr6/18 I've only made two changes to original fiddle: Added JS making class selectors out of the id selectors, and changed container width to 100% – Valero

Answer 2

Except the container width That can be defined in % here's a solution. The only crack that worked was putting container backgroud as that of child one.

or else the last condition is really hard to achieve :) Just being True.

Here's the fiddle link

width fiddle

Here's the css

.container {
width: 100%;
overflow:hidden;
whitespace:nowrap;
max-width:100%;
    background-color:red;
}
.left {
    width:auto;
    background:red;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -ms-text-overflow:ellipsis;
    float: left;
    position:absolute;
    max-width:inherit;
}
.right {
    background:yellow;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -ms-text-overflow:ellipsis;
    text-align: right;
    width:auto;
    float:right;
}

See to it if it fits . Last condition really tough if some one has another solution to the last image you pasted then please share :)

Partin

Your absolute position doesn't make sense with your float, or potentially with the page if the container is not relatively positioned, or set container to relative but you may not be able to do that with respect to the rest of his page which we don't know. Get rid of all that and then you will have my answer :) – Fairfield

I guess in a round of all the 5 condition :) I tested all as possible . I know some styles might be extra :) ill work it out – Partin

Thanks for your efforts. The right div should be pushed off the view and ellipsis should appear, hence I've awarded bounty to Matthew. – Valero

Ok :) giving a try never harm actually i dd not prefer a jquery code :) – Partin

Actually i tried sticking to last point .Only needs to work on webkit based browser, so CSS3 solution is preferred. Cuase it is easy with jquery and javascript even. :) – Partin

Yes - always worth a try :) It is surprising that this turns out to be quite difficult. CSS sometimes seems to be somewhat restricted when it comes to any type of complexity with layouts. Thanks for your input - it's appreciated. – Valero

Thanks :) guess the higher version replace js and jquery :P the way it is evolving :D – Partin