html - Divs overlapping when resizing window -

i'm making website using twitter bootstrap , having issue when resizing browser windows. have tried using width , height both divs, making child div position: absolute; , parent div position: relative;, no avail.

this code

the element i'm trying show pulled through php (a map) , how overlaps.

i realize shouldn't doing styling within html, wanted show details in 1 place.

i able map scale without overlapping using 2 classes come twitter bootstrap, called

embed-responsive embed-responsive-16by9 

and source code

    .embed-responsive {   position: relative;   display: block;   height: 0;   padding: 0;   overflow: hidden; }      .embed-responsive-16by9 {   padding-bottom: 56.25%; } 

even though tried manually make div s parent position: relative; , child of every positioning, didn't work, guess it's height , padding. thank responding, , hope answer helps more people.