HTML layout that has flexible left pane and a fixed right. Left can't wrap, must show ellipsis

Question

I need items in a list to be this format:

|Name                               |    Some other val1|
|Very very long no wrap line that...|    Some other val2|

The right side is a fixed width.
The left side must fill all available width up to the right pane.
Has to react to screen resizing (it's a mobile website, so really orientation changes)
Lines of text on the left pane must not wrap, they need to be cut off using ellipsis (text-overflow: ellipsis).

Put another way:

|<-- flexible, multi-line, but not wrapping (uses ellipsis) -->|<-- fixed width -->|

I've tried all sorts of float: lefts and rights, overflow:hidden, and tricky stuff with margins with no luck! Should I just use a table?

Is it tabular data? In other words, does the first column relate to the second column? If so, then you should use a table. Otherwise you shouldn't. (At least from a semantics perspective) — Dark Falcon, Sep 05 '13 at 21:05
@Vucko make this an answer and I'll accept it. The trick was "width: calc(100% - 100px);" - clearly black magic! — Aardvark, Sep 06 '13 at 17:08

score 1 · Accepted Answer · edited May 23 '17 at 12:11

You can use a combination of display:inline-block with vertical-align:top and removing the whitespace between the elements - note the HTML comment ( see this answer for more info) and using CSS calc().

HTML:

<div class="parent">
    <div class="left">
        <p>Curabitur tristique, purus a dapibus laoreet, tellus massa tempor turpis, eget tristique turpis lorem vitae nulla. Morbi venenatis, mi vel sodales sollicitudin, quam mauris vulputate nibh, sed convallis arcu nisi sed sem. Suspendisse potenti. Cras lobortis porttitor libero, et commodo risus commodo sit amet. Etiam vitae justo ac est aliquet pharetra. Integer eu auctor mi, a molestie lacus. Morbi vel diam ut sem rutrum eleifend vel quis sapien. Phasellus vel faucibus eros, in commodo neque.</p>
    </div><!--
    --><div class="right">
    </div>
</div>

CSS:

html,body,.parent{
    width:100%;
    height:100%;
}

.right{
    height:100%;
    width:100px;
    background:red;
    display:inline-block;
    vertical-align:top;
}

.left{
    width:calc(100% - 100px);
    height:100%;
    background:blue;
    display:inline-block;
    vertical-align:top;
}

p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
}

JSFiddle

CanIUse calc()

Note: I use Eric Meyer’s “Reset CSS” 2.0

Double thanks for the caniuse link, no stock android browser support is a problem for me. I'll just fix it with some script, sigh... — Aardvark, Sep 07 '13 at 01:27
Yes, that is the only downside of `calc()`. I'm sure that they will fix that in the future versions. For now a little _JS_ magic and you'll be just fine :) — Vucko, Sep 07 '13 at 08:40
I wonder how much development love the AOSP Android browser will get with Chrome being the new focus. — Aardvark, Sep 08 '13 at 00:10

score 0 · Answer 2 · answered Sep 05 '13 at 21:05

I've tried to accomplish the same thing in the past.

In the end, I ended up using table, and it is not as bad as you think.

I was table-phobic before that, but now I am very comfortble using tables whenever necessary.

Using table is the only way to go in this case unless you are willing to use javascript.

Don't be afraid of using tables.

score 0 · Answer 3 · answered Sep 05 '13 at 21:09

Use text-overflow: ellipsis on the left pane

example:

<ul>
    <li>
        <div class="right">RIGHT VALUE</div>
        <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at mi faucibus, fringilla purus non, blandit nibh. Cras non volutpat augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque varius eu leo quis molestie. Sed scelerisque nisl a felis interdum, nec gravida odio condimentum. Integer tellus leo, luctus vitae gravida et, ultrices quis justo. Etiam id dignissim diam. Suspendisse mattis nec odio sit amet adipiscing. Nullam nec ornare massa. Fusce gravida enim eget tellus lobortis cursus. Curabitur venenatis dignissim nisi ut auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>
    </li>
</ul>

css

ul li .left {
    margin-right: 100px;
    height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
ul li .right {
    float: right;
    width: 100px;
    background-color: #ccc;
}

http://jsfiddle.net/HMB8c/

HTML layout that has flexible left pane and a fixed right. Left can't wrap, must show ellipsis

3 Answers3

Linked