Display: table-cell image and text on single line (responsive design) - css

Question

I want to have list item that has a profile picture in the left hand side and Name in the right hand side. The name should be on a single line with overflow:hidden.
How can this be done with responsive widths and heights? I managed to do this with pixels but not with %.
Example:
JSFIDDLE: http://jsfiddle.net/NjqpC/
html, body {
height: 100%;
width: 100%;
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.first {
width: 8%;
height: 3%;
}
.second {
list-style: none;
margin: 0;
padding: 0;
}
.third {
border: .1em solid;
font-size: .8em;
max-height: 100%;
display: table;
}
.third img {
max-width: 100%;
display: table-cell;
}
.third span {
display: table-cell;
vertical-align: middle;
overflow:hidden;
}
<div class='first'>
<ul class='second'>
<li class='third'>
<img src='http://static.wikiartis.com/img/profile-small.gif'>
<span>First-Surname Family-name</span>
</li>
</ul>
</div>

Answer 1

In the class third, add "white-space: nowrap"
.third {
white-space: nowrap;
}
The class containing the width and height needs to get an overflow: hidden
.first {
overflow: hidden;
}
In this case, that is the div.first.
To get the image working as well, I gave all parents a height. 100% for every parent other than first.
I gave the img the following styling:
.third img {
display: table-cell;
height: 100%;
width: auto;
}
See fiddle
By adding white-space: nowrap; you tell the text it may not wrap over multiple lines. So that means the text will always stay on the same line. source