Strange extra DIV height in Google Chrome

I have two DIVs:

• first one is narrow and is floated left and displays a kind of vertical tab structure.
• second one displays content per selected item in the left DIV

You can see a simplified examp开发者_运维技巧le here on JSFiddle.

As shown in example, left DIV is usually higher than the right one. That's why the right DIV is vertically shifted down to align it to the bottom of the selected item in the left DIV so the content is always in view when a user selects an item on the left.

Everything works as expected in Firefox and IE but not in Chrome.

Chrome issue

Whenever you select an item in the left DIV that should reposition the right DIV, the whole container of both gets higher even though non of the contained DIVs is as heigh.

What seems to be going on here and what am I doing wrong?

You can hide the extra height that is added by using .container { overflow-y: hidden; }

Set ur right side div container to position: absolute (i.e height of right and left container to be same and set width as your own)