One-line "row" containing 2 "columns", one of them fluid - html

Question

I would like to have a one-line "row" that contains 2 "columns". The first "column" should be fluid and cut off overflowing text.
The example below is perfectly working in webkit browsers (Chromium, Safari), but not in Firefox or Opera.
Does anyone know a solution that works in all browsers?
http://jsfiddle.net/fluidblue/YV3s9/
HTML:
<div class="header">
<div class="clickable">
<div class="description">
Some very very very very very very very very very very long description
</div>
</div>
<div class="buttons">
Link1
Link2
</div>
</div>
<div class="content">
Text below
</div>
CSS:
*
{
margin:0;
padding:0;
}
.header
{
background-color: gray;
display: table;
width: 100%;
}
.clickable
{
background-color: green;
display: table-cell;
width: 100%;
position: relative;
cursor: pointer;
}
.description
{
width: 100%;
position: absolute;
top:0;
left:0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.buttons
{
background-color: red;
display: table-cell;
white-space: nowrap;
}
Edit: Added top, left as suggested by web2008

Answer 1

Try removing position: absolute given for description or else if you wnat it then set the left and top values.

Answer 2

Tried another approach: flex-box. This is working in Firefox, Chromium, Safari, but not in Opera (overflow: hidden is ignored..)
http://jsfiddle.net/JH5fQ/
HTML:
<div class="flex-container flex-container-style">
<div class="flex-item">
Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>
<div class="flex-item">
Button Button
</div>
</div>
CSS:
.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: start;
-moz-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.flex-item
{
white-space: nowrap;
}
.flex-item:nth-child(1)
{
overflow: hidden;
text-overflow: ellipsis;
background-color: red;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
.flex-item:nth-child(2)
{
background-color: green;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
/* Legacy Firefox implementation treats all flex containers as inline-block elements. */
#-moz-document url-prefix()
{
.flex-container
{
width: 100%;
-moz-box-sizing: border-box;
}
}

Answer 3

Found a solution working in Firefox, Chromium, Safari and Opera (IE untested):
http://jsfiddle.net/zKtU3/
HTML:
<div class="header">
<div class="clickable">
<div class="posrel">
<div class="description">
Some very very very very very very very very very very long description
</div>
</div>
</div>
<div class="buttons">
<div>Button1</div><div>Button2</div>
</div>
</div>
<div>
Text below
</div>
CSS:
.header
{
display: table;
width: 100%;
height: 50px;
}
.clickable
{
display: table-cell;
width: 100%;
}
.posrel
{
position: relative;
/* Vertically centering the text */
line-height: 50px;
}
.description
{
width: 100%;
position: absolute;
top: 0;
left: 0;
/* Cut text */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.buttons
{
display: table-cell;
vertical-align: middle;
/* Prevent wrapping of multiple buttons */
white-space: nowrap;
}
.buttons div
{
display: inline-block;
}
The additional div with the class posrel is needed, because firefox has got a bug when setting position: relative on table-cells: Does Firefox support position: relative on table elements?