Layout not attaching to parent object

The div on my page is centered, but the layout object that I attach to it is all the way in the top left corner. I can’t get the layout to stay in the div. My code is very simple:

css:

[code]html, body {
width: 100%;
height: 100%;
margin: 0px;
overflow: hidden;
}

#mainDiv {
width: 800px;
height: 600px;
margin: 0 auto;
text-align: left;
border: 1px solid black;
}[/code]

javascript:

<script> window.onload = function() { topLayout = new dhtmlXLayoutObject("mainDiv", "3L","dhx_terrace"); } </script>

html:

[code]

    <script type="text/javascript" src="dhtmlxcommon.js"></script>
    <script type="text/javascript" src="dhtmlxlayout.js"></script>
    <script type="text/javascript" src="dhtmlxcontainer.js"></script>
</head>
<body>
    <div id="mainDiv"></div>
</body>
[/code]

This is what it looks like (you can see the border of the div in the background):


It looks like the problem was this:

[code]

[/code] I removed the first include and everything started to work as expected.

Right solution is position: relative.

#mainDiv { width: 800px; height: 600px; margin: 0 auto; text-align: left; border: 1px solid black; position: relative; }