css - position overlaying div within another div -
    i've got 'person' divs in 'main' div. on 'person':hover show overlaying div. want appear within 'main' div, not go beyond 'main's boundaries. way:   when cursor on agch div     when cursor on jalo div     i want jack london's right border aligned main's right border.   the complete example here: https://jsfiddle.net/yjdrnk9o/1/   html    <div id="main">     <div class="person">         <span  class="short-name">wish</span>         <div class="more">             <span>william</span>             <span>shakespeare</span>                     </div>     </div>      <div class="person">         <span  class="short-name">agch</span>         <div class="more">             <span>agatha</span>             <span>christie</span>                    </div>  ...