Layout Trouble

programming web dev
1

Hey guys!
Question: why do I get extra space at the bottom here? A mystery that has plagued me for the past year has risen again to haunt me. Let me know still.

<center>
<div style="position:relative; 
            width:696px; 
            background-color:#D6DDE8; 
            hieght:21; 
            left:-10px;">
&nbsp;
</div>
<div style="position:relative; 
            width:455px; background-color:#99CCCC; height:54px; left:111px; top:1px;">
&nbsp;</div>



<div style="position:relative; top:2px; width:241px; left:-238px; background-color:#99CCCC; height:500px;">
&nbsp;</div>

<div style="position:relative; 
            top:-498px;
            width:455px; 
            background-color:#D6DDE8; 
            height:500px; 
            left:111px;">
&nbsp;
</div>
<!-- -->
</center>