Dojo Content Pane Splitter Not Showing Up - html

Question

I am trying to layout a JavaScript Web Map using dojo components and would like to add splitters to my dojo Content Panes. I have the one between my left pane and center pane working but am unable to get the one between my center pane and footer to appear. The code below is the Content Pane footer I am trying to add a splitter to. I am sure I am missing something simple, does anyone have any advice?
Thanks in advance!!
<div data-dojo-type="dojox.layout.ContentPane" splitter="true" region="bottom" id="footerAll" style="height:60%; width:100%">
<div id="footerDocNum" class="roundedCorners" dojotype="dojox.layout.ContentPane" region="bottom" style="height:90%; width:96%;display:none;">
<table dojotype="dojox.grid.DataGrid" data-dojo-id="grid1" id="grid1" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
<thead>
<tr>
<th field='DOCUMENT_N' width='150px'>Document Number</th>
<th field='SURVEYOR' width='150px'>Surveyor</th>
<th field='TOWNSHIP_R' width='150px'>Township/Range</th>
<th field='SECTION' width='100px'>Section</th>
<th fields="page_id" formatter="makeLink3"width="100px" >
PDF
</th>
</thead>
</table>
</div>
<div id="footerCity" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="bottom" style="height:90%; width:96%; display:none">
<table dojotype="dojox.grid.DataGrid" data-dojo-id="grid2" id="grid2" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
<thead>
<tr>
<th field="CITY" width="200px" >
City
</th>
<th field="Square_Mil" width="150px" >
Square Miles
</th>
</tr>
</thead>
</table>
</div>
<div id="footerPoints" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="bottom" style="height:90%; width:96%; display:none;">
<table dojotype="dojox.grid.DataGrid" data-dojo-id="grid4" id="grid4" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
<td> <tr>
<form name="griddataControl" id="gridDataFormControl" action="resultsControl.cfm" target="_blank" method="post" style="display:none"><input id="gridDataTextControl" name="gridDataTextControl" type="hidden"><input type="hidden"></form>
<button dojoType="dijit.form.Button" value="Export Results" onclick="document.forms['gridDataFormControl'].submit();">Export To Excel</button><b>Monument Results</b></tr></td>
<thead>
<tr>
<th field="POINT_NAME" width="150px" >
Point Name
</th>
<th field="GRID_ADDRE" width="150px" >
Address
</th>
<th field='TOWNSHIP_R' width='150px'>Township/Range</th>
<th field="SECTION" width="100px" >
Section
</th>
<th fields="POINT_NAME,LONGITUDE,LATITUDE" formatter="makeLink1" width="150px" >
Mon. Ref. Sheet
</th>
<th field="MON_NOTES" width="150px" >
Monument Notes
</th>
</tr>
</thead>
</table>
</div>
<div id="footersurvName" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="bottom" style="height:90%; width:96%; display:none;">
<table dojotype="dojox.grid.DataGrid" data-dojo-id="grid5" id="grid5" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
<form name="griddata" id="gridDataForm" action="results.cfm" target="_blank" method="post" style="display:none"><input id="gridDataText" name="gridDataText" type="hidden"><input type="hidden"></form>
<tr><button dojoType="dijit.form.Button" value="Export Results" onclick="document.forms['gridDataForm'].submit();">Export To Excel</button><b>Survey Results</b></tr>
<thead>
<tr>
<th field="page_description" width="150px" >
Survey Number
</th>
<th field="SURVEYOR" width="150px" >
Surveyor
</th>
<th field="ADDRESS_OF_SURVEY" width="200px" >
Address
</th>
<th field='TOWNSHIP_RANGE' width='150px'>
Township/Range
</th>
<th field="SECTION" width="100px" >
Section
</th>
<th fields="subdir,page_id" formatter="makeLink" width="75px" >
PDF
</th>
</tr>
</thead>
</table>
</div>
<div id="footerSection" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="bottom" style=" height:90%; width:96%; display:none;">
<table dojotype="dojox.grid.DataGrid" data-dojo-id="grid7" id="grid7" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
<thead>
<tr>
<th field='TOWN_RANGE' width='150px'>
Township/Range</th>
<th field="Section_Nu" width="150px" >
Section
</th>
</tr>
</thead>
</table>
</div>
</div>