Расположить объект относительно его контейнера?

Question

Я делаю сайт, перечисляющий сервер, и для каждого сервера я хотел бы отображать изображение и некоторую информацию, которая будет отображаться, когда нарисованная фотография «зависает» с помощью мыши.

Когда имя сервера слишком длинное, я хочу, чтобы он прокручивал, чтобы отобразить оставшийся текст при наведении курсора, как бы это сделать, не указав длину в CSS?

Пример: http://jsfiddle.net/5EhSx/2

<div class='server'> 
    <div class='server_info'> 
     <div align='center' style='margin: 5px; white-space:nowrap; overflow:hidden;'><span class='server_name'>Abc def ghi jkl mno pqr stu vwx yza bcd efg hij klm nop qrs tuv wxy zab cde</span> 
     </div> 
     <div style='overflow:hidden; padding: 0 5px;'> 
      <div style='float:left;'>26 Comments</div> 
      <div style='float:right;'>17649 Votes</div> 
     </div> 
     <div style='overflow:hidden; padding: 0 5px;'> 
      <div style='float:left;'>Uptime: 99.7%</div> 
      <div style='float:right;'>73/96 Players</div> 
     </div> 
    </div> 
</div> 

Css:

.server { 
    font-family:Verdana, Geneva, sans-serif; 
    font-size:12px; 
    height: 170px; 
    width: 310px; 
    border: 1px solid grey; 
    position:relative; 
    overflow:hidden; 
    border-bottom-right-radius:7px; 
    border-bottom-left-radius:7px; 
    cursor:pointer; 
    float:left; 
    border-radius: 7px; 
} 
.server_info { 
    color: #FFFFFF; 
    background-color: rgba(0, 0, 0, 0.5); 
    position: absolute; 
    width: 100%; 
    bottom: 0; 
    border-bottom-right-radius:7px; 
    border-bottom-left-radius:7px; 
    height: 25px; 
    transition: height 0.5s; 
    -webkit-transition: height 0.5s; 
} 
.server_name { 
    position: relative; 
    left: 0; 
    transition: left 1s; 
    -webkit-transition: left 1s; 
} 
.server:hover .server_info { 
    height: 60px; 
    transition: height 0.5s; 
    -webkit-transition: height 0.5s; 
} 
.server:hover .server_name { 
    left: -165px; 
    transition: left 3s; 
    -webkit-transition: left 3s; 
} 

Answer 1

Можно указать оба свойства: width и left (если position:absolute) или margin-left (если position:relative) в процентах, как: width:20%; margin-left:15%;