I've experienced the same problem and I developed 2 methods to combat it. First off reload the container after you have appended the onclick-image.
Second, and probably more important, dynamically correct the height of the surrounding div to match the height of the image:
2. // bricks correct height
var brick = $("#marker #container .brick");
var content = $(this).find(">div");
var img = $(this).find("img");
<div style="height: 284px; position: static; top: -133px;" class="test">
<a class="arrow" href="#" target="_self"><img class="img" src="test.jpg" width="374" height="284"></a>
Edit: In your code you have the same problem, there is no height in the style.
<div style="position: absolute; left: 330px; top: 280px;" class="box item 3d">
And it seems to me you have a problem with the width, too. I think you need to use a smaller width for the column. A good value would be the width of the small image and some border.
mm that makes sense and it is promising, thanks. Will have a try and reply back
This is only a valid solution if you already have image dimensions defined. If so, the box model will take care of any overlapping. Setting height/width explicitly is superfluous.