2

I have two divs side by side. The firs one contains a text field that can be rather lengthy and another one contains a number that is short.

I need the first div to occupy all available space without stretching parent and clipping if neccessary. Ant it should take width of a second div into account. So if length of the text is short, then two divs should be side by side, but if text is long, then the first one will be clipped and the second one will be pushed all the way to the right.

Here is approximate table layout:

<div id="container">
    <div id="row">
        <span id="text">Short text</span><span id="value">123</span>
    </div>

    <div id="row">
        <span id="text">A bit longer text</span><span id="value">555</span>
    </div>

    <div id="row">
        <span id="text">A very very very very very very very very long text</span><span id="value">555</span>
    </div>
</div>

And corresponding CSS:

#container {
    border: 1px solid #000000;
    width: 300px;
}

#row {
    display: inline-block;
    border: 1px solid #000077;
    width: 100%;
    clear: both;
}

#text {
    display: inline-block;
    border: 1px solid #007700;
}

#value {
    display: inline-block;
    border: 1px solid #770000;
}

Here is a jsfiddle template illustrating what I need. A very long text line should be clipped and 555 should be placed next to it on the same line so that entire construction fits into specified 300px (number is arbitrary, it will be defined by other elements in real life and it is not known in advance).

Matt Coughlin
  • 18,666
  • 3
  • 46
  • 59
Alex Taradov
  • 148
  • 6

3 Answers3

1

You possibly could use display: table (Fiddle):

#container {
    display: table;
}

#row {
    display: table-row;
}

#text {
    display: table-cell;
}

#value {
    display: table-cell;
}
Linus Caldwell
  • 10,908
  • 12
  • 46
  • 58
  • Works nicely, but instead of using `display:table`, I would just use a table. – Kraz Mar 18 '13 at 21:43
  • @Kraz, Would be possible too, but for actually using a `
    `, you need to do more server side code to bring it into columns and rows.     – Linus Caldwell Mar 18 '13 at 21:46
  • mmmh... no? It's [exactly the same mark up](http://jsfiddle.net/Tf8WR/12/), `span` becomes `td`, `div` becomes `tr` and `#container` is the `table`. – Kraz Mar 18 '13 at 21:49
  • @Kraz, LOL! I just mixed up 2 of my answers. ;-) Sorry, you are right, it was the other case where a reformatted code would be needed. Nevermind. – Linus Caldwell Mar 18 '13 at 21:53
  • I need shorter strings have numbers right next to them, not on the right in one column. – Alex Taradov Mar 18 '13 at 22:02
  • @linus-caldwell almost. Now very long text should take only one line and it should be clipped to maximum available space (whatever is left after the number) – Alex Taradov Mar 18 '13 at 22:09
  • @ataradov, ok, that's not possible with `display: table` I think, because a `table-cell` has no overflow. Maybe you could bring your example nearer to your actual draft? I'm thinking of a solution where the `#value` is inside the `#text`. But depends on your desired layout. – Linus Caldwell Mar 18 '13 at 22:14
  • If you can make it work with any layout, I'll take it. This is actually very close to my final layout, except that 300px width will be 20% of full page width. I've tried multiple ways to place #value inside #text, it did not work for me, #value just gets pushed put. – Alex Taradov Mar 18 '13 at 22:18
  • Ok, here you are. This one is definitly not clean, but it could give you a hint. Maybe you can extend it for your layout. http://jsfiddle.net/Tf8WR/15/ – Linus Caldwell Mar 18 '13 at 22:26
0

Demo Fiddle

#text {
    display: inline-block;
    border: 1px solid #007700;
    float:left;
    min-width:80%;
    max-width:80%;
}

#value {
    display: inline-block;
    border: 1px solid #770000;
    float:left;
    max-width:18%;
    overflow:hidden;
}
Adil Shaikh
  • 44,509
  • 17
  • 89
  • 111
  • You should probably add a `max-width:18%` on `#value` (and maybe overflow?) – Kraz Mar 18 '13 at 21:46
  • I don't know exact percentage values, numbers can be anywhere from 1 to 6 digits. It is a shame to waste space by "reserving" it for 6 digits max. – Alex Taradov Mar 18 '13 at 22:05
0

I just put the styling inline given you have multiple elements with id="text". Set a max-width, define a height, and set overflow:hidden all the while floating them both left. You may have to use a blank clear-both div in between rows.

<div id="text" style="overflow:hidden; float:left; max-width:270px; height:22px;">A very very very very very very very very long text</div><div style="float:left;" id="value">555</div>
Zak
  • 6,976
  • 2
  • 26
  • 48