three.js mouse offset with raycasting and intersecting

Question

I've just started graphics programming with Three.js and I am trying to get a mouseover interaction with some shapes for a project I am working on. I have tried some of the other answers from similar questions but I still cannot get the mouse to interact with the cube in my code.

I am trying to use other GUI elements on the page so I cannot have just a 3D view on a single page.

This is the example I am trying to follow from jsfiddle: http://jsfiddle.net/cn7ecoaa/

I have changed the mousedown to mousemove which works perfectly however the problem occurs when I put the container into another div instead of putting it into the document body.

This is the layout of the page

There is an intersection when my mouse is not over the cube, but just below View 1 as you can see.

I know the solution is to change the offset for mouse.x and mouse.y but I am unable to find the correct value.

This is the html for the layout:

<div class="col-sm-12">
<div class="row">
    <div class="col-sm-6">
        <div id='view1' class="well">
            <h4>View 1</h4>
        </div>
    </div>
    <div class="col-sm-6">
        <div id="view2" class="well">
            <h4>View 2</h4>
            <div id="canvas"></div>
        </div>
    </div>
</div>

Javascript:

container = document.getElementById( 'canvas' );
view2 = document.getElementById( 'view2' );
view2.appendChild(container);

CANVAS_WIDTH = 400,
CANVAS_HEIGHT = 400;

renderer = new THREE.WebGLRenderer();
renderer.setSize(CANVAS_WIDTH, CANVAS_HEIGHT);
container.appendChild(renderer.domElement);

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(45, CANVAS_WIDTH / CANVAS_HEIGHT, 1, 1000);
camera.position.y = 150;
camera.position.z = 500;
camera.lookAt(scene.position);
scene.add(camera);


controls = new THREE.OrbitControls(camera, container);
scene.add(new THREE.AmbientLight(0x222222));

var light = new THREE.PointLight(0xffffff, 1);
camera.add(light);

mesh = new THREE.Mesh(
    new THREE.BoxGeometry( 200, 200, 200, 1, 1, 1 ),
    new THREE.MeshPhongMaterial( { color : 0x0080ff }
    ) );
scene.add( mesh );
objects.push( mesh );

// find intersections
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();


// mouse listener
document.addEventListener('mousemove', function(event) {
    mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.clientWidth ) * 2 - 1;
    mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.clientHeight ) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);
    intersects = raycaster.intersectObjects(objects);

    if (intersects.length > 0) {
        info.innerHTML = 'INTERSECT Count: ' + ++count

    }

}, false);