My initial goal was to stack two elements together side-by-side, both taking the full available height. One element has a fixed width of 200px with an image (70px wide) inside, while the other element should only fit one line of text, clipping any overflow with '...'
This is how I structured my HTML:
<div class="wrapper-wrapper">
<div class="wrapper">
<div class="left">
<image src="http://s4.postimg.org/i1huts8vt/kitten.png" />
</div>
<div class="right">
Text row 1 is a very freaking wide row with tons of text so deal with it or gtfo. Do I have enough text to fill this box now ?
</div>
</div>
</div>
And here's the CSS for it:
.wrapper-wrapper {
width: 600px;
}
.wrapper {
border:1px solid #aaa;
margin:0 0 10px 0;
display: table;
width: 100%;
}
.left {
width:200px;
background-color:#eee;
}
.left, .right {
display: table-cell;
padding:5px;
}
.right {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
Here is a demo you can run:
http://jsfiddle.net/nLgqsxLg/2/
To achieve the desired vertical stacking, I used display: table/table-cell. The issue I faced was when setting the white-space property as suggested by PPK at https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow, the widths of the elements were not being applied correctly.
UPDATE
I made some updates to the code. Assuming my wrapper-wrapper is 600px wide, the left div should be 200px wide and the right div should take up the remaining space (400px). The text in the right div should be clipped at 400px, but currently, it expands to fit all its content.
Current Layout: https://i.stack.imgur.com/8H7j5.png
Desired Layout: https://i.stack.imgur.com/E2R54.png