Responsive adsense ad unit go over its div

Question

According to Google, responsive ads fill the available space dynamically according to the width and height of that provided space:

"We calculate the required size dynamically based on the width of the ad unit’s parent container, then determine what's the best standard height to go with that width."

I placed a responsive Adsense unit in a div that has a width value of 774px. Here is the div css code:

.content-left{
display:table-cell;
width:774px;
max-width:774px;
vertical-align:top;
padding-left:10px;
padding-right:10px;
height:500px;}

The problem is that the adsense unit go over that div and cover the content of the div on the right like shown in the following image.

The adsense unit is actually taking about 1100px in width. I use responsive adsense so that ads can resize according to the screen size. If a user browse my site on their smartphone, obviously the ad's size changes accordingly.

In my attempt to solve the problem, I added a new div inside the left div and put the adsense code in it and set the maximum width as follows:

.adsenseOnLeft{
max-width:774px;

}

That did not solve the issue and adsense unit is still taking more space than its parent div. So how can I make its width not go over the width of the div it is placed inside?

Update: The issue is happening only in chrome browser. When I refresh the page, the unit respect it's parent div and doesn't go over it. It only does that when I first browse to any page. I checked it in Internet Explorer, the unit stays inside it's container and working as it suppose it.

Answer 1

Have you tried adding a float and a width?

.adsenseOnLeft
{
  float: left;
  width:100% !important;
}