html - コンテナを基準にしてオブジェクトを配置する

Question

私はサーバー一覧の Web サイトを作成しています。サーバーごとに、画像とマウスで「ホバー」したときに表示される情報を表示したいと考えています。

サーバー名が長すぎる場合、ホバーしたときにスクロールして残りのテキストを表示したいのですが、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;
}