The div itself was scaling properly when placed within the container, however there was some discrepancy between the clientX/clientY and the actual left/top of the div due to the scale factor. I was able to figure it out though, and add some code so that the newly formed div wouldn't draw beyond the container frame, in case anyone is interested heres what i did.
var scaleFactor = getCurrentScale($('#container'));
var container = $('#container');
var glosspop = $('#glossary-popup')
innerDivWidth = 340;
innerDivHeight = glosspop.outerHeight();
var offset = container.offset();
var l = offset.left;
var t = offset.top;
var h = 768;
var w = 1024;
var lScale = l/scaleFactor;
var maxx = lScale + w - innerDivWidth - 20 ;
var maxy = t + h - innerDivHeight - 20;
window.onmousemove = function (e) {
var x = e.clientX / scaleFactor,
y = e.clientY / scaleFactor;
if(y <= maxy && y >= t) {
$('#glossary-popup').css({
top: (y+20) + 'px'
});
}
else {
$('#glossary-popup').css({
top: (maxy+20) + 'px'
});
}
if(x <= maxx && x >= lScale) {
$('#glossary-popup').css({
left: (x-lScale+20) + 'px'
});
}
else {
$('#glossary-popup').css({
left: (maxx-lScale+20) + 'px'
});
}
// console.log(y, t, h, innerDivHeight, maxy);
};