Position an object relative to its container? - html

Question

I'm making a server listing website and for each server I'd like to display an image and some information that will be shown when the pictured is "hovered" with the mouse.
When the server name is too long, I want it to scroll to show the remaining text when hovered, how would I do this without specifying the length in CSS?
Example: 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

You can specify both properties: width and left (if position:absolute) or margin-left (if position:relative) in percentage, like: width:20%; margin-left:15%;