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:

Both divs must stay on the same line.
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.
The right div's text should be right aligned. In the case of overflow, ellipsis should be used.
Text is dynamic, so no percentages or fixed widths can be used.
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

enter image description here

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

enter image description here

Input

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

Output

enter image description here

Matthew · Accepted Answer · 2013-09-24T19:07:35.220

10

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:

enter image description here

edited Sep 24 '13 at 19:07

answered Sep 24 '13 at 17:14

Matthew

9,851
4
46
77

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? – Philip Murphy Sep 25 '13 at 07:29
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. – Matthew Sep 25 '13 at 13:21
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. – Matthew Sep 25 '13 at 14:54
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()); });` – Matthew Sep 25 '13 at 16:16
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? – Philip Murphy Sep 26 '13 at 20:01
PS for the benefit of other readers you can use a to create a space between the divs. – Philip Murphy Sep 26 '13 at 20:06
Try using word break for the divs and whitwe space no wrap for container. – Anobik Sep 26 '13 at 23:36
@Anobik 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. – Matthew Sep 27 '13 at 15:23
@Anobik Fiddle or it didn't happen? :) – Matthew Sep 27 '13 at 15:29
@Matthew 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% – Philip Murphy Sep 28 '13 at 07:11

score 0 · Answer 2 · answered Sep 25 '13 at 12:56

0

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 :)

answered Sep 25 '13 at 12:56

Anobik

4,841
2
17
32

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 :) – Matthew Sep 25 '13 at 14:32
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 – Anobik Sep 25 '13 at 14:52
Thanks for your efforts. The right div should be pushed off the view and ellipsis should appear, hence I've awarded bounty to Matthew. – Philip Murphy Sep 26 '13 at 20:45
Ok :) giving a try never harm actually i dd not prefer a jquery code :) – Anobik Sep 26 '13 at 23:15
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. :) – Anobik Sep 26 '13 at 23:32
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. – Philip Murphy Sep 27 '13 at 07:36
Thanks :) guess the higher version replace js and jquery :P the way it is evolving :D – Anobik Sep 27 '13 at 07:45

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

2 Answers2

Linked