Grids question

[SnaKe |WiH|]

Hey all. I am trying to modify a grid to have 1/4 units in the header and footer, but for some reason the header overlaps the body content in the layout after editing the grid. The footer does not overlap the body content. Any help would be great, not sure what I am missing. Additionally, is there code to put a space between the header and the body and the body and the footer? Thank you for any help in advance! Here is my grid code:

<div id="doc3">

<div id="hd">


<div class="yui-g">


<div class="yui-g first">


<div class="yui-u yui-header first">


<ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>


</div>


<div class="yui-u yui-header">


<ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>


</div>


</div>


<div class="yui-g">


<div class="yui-u yui-header first">


<ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>


</div>


<div class="yui-u yui-header">


<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>


</div>


</div>


</div>


</div>


<div id="bd">


<div class="yui-u yui-panel">


<ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>


</div>


</div>


<div id="ft">


<div class="yui-g">


<div class="yui-g first">


<div class="yui-u yui-footer first">


<ul class="list_no_decoration widget_list" id="widgetlist_column6">$column[6]</ul>


</div>


<div class="yui-u yui-footer">


<ul class="list_no_decoration widget_list" id="widgetlist_column7">$column[7]</ul>


</div>


</div>


<div class="yui-g">


<div class="yui-u yui-footer first">


<ul class="list_no_decoration widget_list" id="widgetlist_column8">$column[8]</ul>


</div>


<div class="yui-u yui-footer">


<ul class="list_no_decoration widget_list" id="widgetlist_column9">$column[9]</ul>


</div>


<div>


</div>


</div>

</div>