problem with current layout

[Ninjakreborn]

Can someone please tell me what's wrong with this.

For now I just need the basics to work.
I don't want to add any  more, until this works, for some reason the top part is above the div, is there something I am doing wrong, or something I can do better in my css, this is starting to come together some but slowly, and with problems.

http://www.hasbadservice.com/admintemplate.php

[code]body {
text-align: center;
background-color:#999999;
}

#header {
margin-left:auto;
margin-right:auto;
width:50em;
height:8em;
background-image:url(images/header.jpg);
clear:both;
}

.font1 {
font-family:Arial, Helvetica, sans-serif;
font-size:1.5em;
float:left;
margin-top:80px;
margin-left:25px;
color:#FFFFFF;
}

#wrapper {
margin-left:auto;
margin-right:auto;
width:50em;
height:auto;
background-image:url(images/bodyoutline.gif);
background-repeat:no-repeat;
clear:both;
}

#top {
width:45em;
margin-left:auto;
margin-right:auto;
background-image:url(images/top.gif);
background-repeat:no-repeat;
height:2em;
}[/code]


[attachment deleted by admin]

[Ninjakreborn]

Can someone look at that, and see what exactly is that is causing that, but more of, I would like to find out, why it's causing that.
I am not understanding the general idea, I have 2 background images.
They seem proper but for some reason, one of the div's isn'tright, I can't figure out what about this, is not working.