Two-column layout with fixed right column and minimal left column

Question

I need something like this

------------------------------
| Some text | fixed-teeeeext |
------------------------------

-----------------------------------
| Some long text | fixed-teeeeext |
------------------------------------

-----------------------------------------
| Some very long te... | fixed-teeeeext |
-----------------------------------------
|<-         a        ->|<-     b      ->|
|<-                 c                 ->|

This is all for a single line of text. The right column (b) is fixed-width and the entire block (c) has a max width. The left column (a) should be minimal but if there's not enough space in c-b there should be ellipsis.

I tried with an old-fashioned table and with various CSS two-column layouts but I'm stuck.

Update

This works in FF but not in IE9:

<table style="font-family: sans-serif;">
  <tr>
    <td style="max-width: 307px; 
               overflow: hidden; 
               text-overflow: ellipsis; 
               white-space: nowrap; 
               display:block; 
               font-weight: bold;">Lorem ipsum dolor sit amet, consectetur </td>
    <td style="width: 123px; color: #545556; font-size: 15px;">ST.2012.10.17.006</td>
  </tr>
</table>

Update II

I consolidated all the findings here: http://frightanic.com/web-authoring/ellipsis-in-table-columns/

How is the a column supposed to resize if the parent (c) is fixed? — bookcasey, Oct 18 '12 at 20:55
If you want an ellipsis at a certain point you have to set a width on column a. — Jonathan Eckman, Oct 18 '12 at 20:56
@bookcasey - you're right, I meant to say max-width for c, I'll correct the question. — Marcel Stör, Oct 19 '12 at 06:05

Vinod Vishwanath · Accepted Answer · 2012-10-19T09:00:10.920

2

Try the old table structure: 1 row with 2 cells, 2nd cell having a fixed width. For the 1st cell, add the following CSS:

.longTd {
border: 1px solid black;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display:block;
}

display:block is the crucial bit of code here.

Edit for IE9 compatibility, instead of the table structure, use inline-block Div elements:

.longDiv{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
display:inline-block;
max-width:200px;
}
.shortDiv{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
display:inline-block;
width:100px;
}

Then the HTML:

<div class="longDiv">
Lorem ipsum dolor sit amet, consectetur blah di blah
</div>
<div class="shortDiv">
Not much text here
</div>

The inline-block keeps both Div's in the same line.

edited Oct 19 '12 at 09:00

answered Oct 18 '12 at 21:04

Vinod Vishwanath

5,821
2
26
40

Nearly there...works fine in FF but not in IE9 (I updated the questions) – Marcel Stör Oct 19 '12 at 06:24
What's the problem in IE9? (Sorry I don't have IE) Which of the CSS properties is not applied in IE9? – Vinod Vishwanath Oct 19 '12 at 08:17
max-width or text-overflow is ignored, the column just keeps growing: http://frightanic.com/misc/ff-vs-ie.png I also tried to set max-width on the table or the row itself but for IE that makes no difference. – Marcel Stör Oct 19 '12 at 08:27
The problem with IE is that it doesn't applie the "display:block" property to table cells. So I would suggest you go with two div's with the display style set to `display:inline-block;` I'll edit my answer with the new code sample. – Vinod Vishwanath Oct 19 '12 at 08:56
Works fine - if one isn't in quirks mode. Also this works http://stackoverflow.com/a/12936003/131929 . IE in quirks mode ignores display:inline-block;. Thanks for your help. I'll accept your answer even though I'm still looking for something that works in quirks mode but I guess that's out of scope. – Marcel Stör Oct 19 '12 at 09:53

score 0 · Answer 2 · answered Oct 18 '12 at 20:56

0

This works to add an ellipsis and degrades gracefully in browsers that don't support it:

.truncate {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

answered Oct 18 '12 at 20:56

bookcasey

39,223
13
77
94

Two-column layout with fixed right column and minimal left column

2 Answers2