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>     </div>      <div class="person">         <span  class="short-name">jalo</span>         <div  class="more">             <span>jack</span>             <span>london</span>                  </div>     </div>  </div> 

css

#main {   position: relative;   border: 1px solid;   width: 150px;   height: 100px; }  .person {     float:left;     border:1px solid;     margin:1px 2px;; }  .person:hover>.more {     display: block !important; }  .more {     z-index:1;     position:absolute;     white-space: nowrap;     background-color:gray; } 

thank you

like this? https://jsfiddle.net/yjdrnk9o/3/

i added class html distinguish last .person others , said .more child of .person.right element should aligned right.

#main {    position: relative;    border: 1px solid;    width: 150px;    height: 100px;  }    .person {      float:left;      border:1px solid;      margin:1px 2px;;  }    .person:hover>.more {      display: block !important;  }    .more {      z-index:1;      position:absolute;      white-space: nowrap;      background-color:gray;  }    .person:last-of-type .more {      right: 0;  }

<div id="main">  	<div class="person">  		<span  class="short-name">wish</span>  		<div  style="display:none;" class="more">  			<span>william</span>  			<span>shakespeare</span>			  		</div>  	</div>        <div class="person">  		<span  class="short-name">agch</span>  		<div  style="display:none;" class="more">  			<span>agatha</span>  			<span>christie</span>			  		</div>  	</div>        <div class="person on-right">  		<span  class="short-name">jalo</span>  		<div  style="display:none;" class="more">  			<span>jack</span>  			<span>london</span>			  		</div>  	</div>        </div>