Переполнение детского элемента, если у бабушки и дедушки?

Question

В начале я хотел бы объяснить свою проблему, ну, у меня есть основное тело контейнера, где ширина авто и минимальная ширина - 960 пикселей (ширина экрана может быть больше ширины детей), есть дочерний контейнер, где margin auto и width 960px, внутри дочернего контейнера У меня есть элемент (карта), который имеет абсолютную позицию, и он всегда находится за пределами родителя, но не всегда вне тела, , когда я изменяю размер окна, изменяется размер тела, а затем элемент находится вне тела и вне его родителя, как всегда, я пытался закрепить его, если он находится вне тела, потому что он делает мой макет белым зазором на правой стороне, но не знает, как, может ли какой-то орган объяснить мне, как я могу это сделать?

http://jsfiddle.net/8hbynzfb/

<div id="content"> 
    <div class="container"> 
     <div id="info"> 
      Test 
     </div> 
     <div id="map"> 
     </div> 
    </div> 
</div> 


* { 
    padding: 0; 
    margin: 0; 
} 

body { 
    border: 2px solid black; 
    min-width: 960px; 
} 

.container { 
    position: relative; 
    width: 960px; 
    margin:0 auto; 
    outline: 1px solid red; 
    font-size: 0; 
} 

.container .col-left { 
    position: relative; 
    display: inline-block; 
    margin-right: 41px; 
    width: 293px; 
    outline: 1px solid green; 
} 

.container .col-center { 
    position: relative; 
    display: inline-block; 
    margin-right: 41px; 
    width: 293px; 
    outline: 1px solid blue; 
} 

.container .col-right { 
    position: relative; 
    display: inline-block; 
    width: 292px; 
    outline: 1px solid yellow; 
} 

.container > div { 
    vertical-align: top; 
    font-size: initial; 
} 

#info { 
    display: block; 
    height: 84px; 
    margin-left: 900px; 
} 

#map { 
    display: block; 
    height: 256px; 
    position: absolute; 
    background-image: url('http://gis.meridenct.gov/meriden/images/i_map.png') no-repaet; 
    width: 256px; 
    right: -128px; 
    top: 0px; 
    outline: 1px solid yellow; 
} 

Answer 1

Просто добавьте атрибут переполнения в вашем теле:

body { 
    border: 2px solid black; 
    min-width: 960px; 
    overflow: hidden; /* this is new */ 
} 

updated jsfiddle example

EDIT: до сих пор скроллбары, добавить правило переполнения #content вместо этого.

body { 
    border: 2px solid black; 
    min-width: 960px; 
} 
#content { 
    min-width: 960px; 
    overflow: hidden; 
} 

updated jsfiddle example