Image outside of div in infobubble - html

Question

I am working on Google Map and showing an InfoWindow using the InfoBubble library. My problem is that when I show image for outside div with CSS properties it's showing half image that is within div.
Here is my CSS code:
#wider-header{
overflow: hidden;
display:inline-block;
width: 100px;
height: 300px;
}
#wide-header img {
position:relative;
top:-70px;
float:right;
border-radius: 50% 50% 50% 50%;
border: 2px solid #d81f27;
}
and the JavaScript:
infoBubble2 = new InfoBubble({
map: map,
content: "<div id='wide-header'><img id='jdImg' src='http://i.telegraph.co.uk/multimedia/archive/02474/cat-eyebrows-1_2474686k.jpg' width='100' height='100' alt='userImage'></div>",
position: new google.maps.LatLng(-35, 151),
padding: 10,
backgroundColor: '#fff',
borderRadius: 4,
arrowSize: 10,
borderWidth: 1,
borderColor: '#2c2c2c',
disableAutoPan: false,
hideCloseButton: true,
arrowPosition: 50,
arrowStyle: 3
});
infoBubble2.open();
The code above results in this:
How can I fix this?

Answer 1

i found my solution by changed these lines in infobubble.js library
// Content area
var contentContainer = this.contentContainer_ = document.createElement('DIV');
contentContainer.style['overflowX'] = 'auto';
contentContainer.style['overflowY'] = 'auto';
into
// Content area
var contentContainer = this.contentContainer_ = document.createElement('DIV');
contentContainer.style['overflowX'] = 'visible';
contentContainer.style['overflowY'] = 'visible';
Here is the required solution