css - positioning Div inside another Div with centered background image? -

i have div has image of world map centered inside it. , there div within div.

what trying put texts inside second div , place on top of world map image. can without problem when resize browser, seems second div moves original place!

i have demonstrated issue in images bellow:

on browser resize this:

and here css:

#body{     top:0px;   }   #wrapper{     position:absolute;     width:100%;     top:0px;     left:0px;     right:0px;     bottom:0px;     min-width:100%;  }  #flagholder a:link, a:active, a:visited{     font-family:verdana, geneva, sans-serif;     color:#333;     text-decoration:none;       margin-left: auto ;   margin-right: auto ; }  #header{     background-image:url(img/bg-header_footer.jpg);     width:100%;     height:250px;   } #footer{     background-image:url(img/footer.png);     width:100%;     height:250px;   }  #content{   }  #flagholder{      width:80%;     border-radius:15px;     border:solid 2px #ecf0f1;   }  #mapholder{     background-image:url(img/map.png);     background-repeat:no-repeat;     background-position:center;     width:100%;     height:419px;     }  #apdiv1 {     position:relative;     margin-right:30%;     width:115px;     height:100px;     z-index:1;     font-size:10px;     font-family:verdana, geneva, sans-serif; } 

how can make text div stay relative according map?

edit:

here html:

    <div id="wrapper" align="center">      <div id="header"></div>      <div id="content">        <div id="mapholder"  oncontextmenu='alert("copyrighted content");return false;'>        <div id="apdiv1"  oncontextmenu='alert("copyrighted content");return false;'>       la, usa       <div>          </div>      </div> </div> 

use position absolute instead of relative ur second div , elements......hope works