custom dojo widget in a loop; html not flowing properly - dojo

Question

I loop over an array of objects, adding a custom widget to the page each time. I need to put a "space" div atop each widget, and "pageBreak" div at the bottom of each widget. Here is the creation/placement of the widgets inside the loop:
var placeIt = true;
array.forEach(data.features,function(feat,i){
var newDijit = new printDijit({}, domConstruct.create('div'));
newDijit.placeAt(dom.byId('printWindow'));
newDijit.startup();
if (placeIt){
newDijit.cNode(domConstruct.create("div",{class:'space',innerHTML:'a'}));
placeIt = false;
}else{
newDijit.cNode(domConstruct.create("div",{class:'break',innerHTML:'a'}));
placeIt = true;
}
});
Here is the widget:
require([
"dojo/parser",
"dojo/ready",
"dojo/_base/declare",
"dojo/dom-construct",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin"
], function(parser, ready, declare, domConstruct, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin){
declare("printDijit", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin],{
templateString: dojo.cache(new dojo._Url("printDijit.html")),
cNode: function(htmlCnode){
domConstruct.place(htmlCnode,this.domNode.id,'before');
}
});
});
Here is the widget template; printDijit.html
<div class="printTemplateCls" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
<div class="printHeaderCls" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Top-header</div>
<div class="printInputsCls" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">Top-right pane</div>
<div class="printBottomPaneCls" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'bottom', gutters:false">
<div class="printPicCls" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'leading'" style="width:342px">Bottom-left pane</div>
<div class="printMapCls" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
The html in fireBug looks fine, but the 2nd and onward space/break div's are behind the widget and dont' flow correctly (see screenshot). If the widgets declared everything is good.
Anyone know what's going on here?

Answer 1

had to wrap the template in an outer div, like below. I would assume this is because the original root element was also a widget.
<div>
<div class="printTemplateCls" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
<div class="printHeaderCls" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Top-header</div>
<div class="printInputsCls" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">Top-right pane</div>
<div class="printBottomPaneCls" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'bottom', gutters:false">
<div class="printPicCls" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'leading'" style="width:342px">Bottom-left pane</div>
<div class="printMapCls" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</div>