drawing area not aligning with html container element

I am trying to write an application which has a layout similar to the draw2d example "buildin_commandstack", with a panel (a column) from which you can drag in items into the drawing area.

I can see that your example uses jQuery UI Layout, but I'm reluctant to use this library as it seems not to have been updated since 2012 at least. So I'm try to use split.js to implement the resizeable panels.

The problem I'm facing is that the drawing area isn't aligning with the bounds of the container element. I've tried using various ways of aligning columns, but not been successful. An example is below:

<!DOCTYPE html>
<head>
<title>basic</title>
<meta charset="utf-8"/>

<script src="./lib/jquery.js"></script>
<script src="./lib/jquery-ui.js"></script>
<script src="./lib/draw2d.js"></script>

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded",function () {

    // create the canvas for the user interaction
    //
    canvas = new draw2d.Canvas("gfx_holder");

    circle =new draw2d.shape.basic.Circle({diameter:80, x:50, y:150, bgColor:"rgba(255,0,100,0.5)"});
    canvas.add(circle);
    });
</script>
</head>

<body>
<div id="toolbar" style="width:200px;height:1000px;display:inline-block"><p>some text</p>
</div>
<div id="container" style="width:800px;height:1000px;display:inline-block">
    <div onselectstart="javascript:/*IE8 hack*/return false" id="gfx_holder" style="display:inline-block;width:800px; height:3000px; border: solid red 2px">
    </div>
</div>

</body>
</html>

When I view this in my browser devtools it shows the gfx_holder html element positioned as I expect, but below that element in the document tree there is an svg element (which I presume is the drawing area) which starts at 0,0 and hence the pink circle is drawn outside the container.

A similar thing happens when I put the gfx_holder container within a td element positioned on the right hand side within an html table.

How do I get the drawing area to align with the html element?

Any help to resolve this would be appreciated thanks!

freegroup / draw2d

drawing area not aligning with html container element #123