Overlapping div's verticaly

1

hello guys. im having a bit of trouble with the website and will be needing your help.

as you can see in the screenshot, for some reason the box with the content has it’s header section go underneath the header (the header is bigger than that - 220 pixels high, i just didnt put it in). while in internet explorer, it works perfectly.one other problem is that in firefox the div doesnt correctly expand to occupy the content.im so annoyed right now

the html of the header and content is:
<center>

<div id=“headerback”>

<div id=“header”>

</div>

</div>

</center>

<center>
<div id=“wrap”>

&lt;a id="top" name="top" accesskey="t"&gt;&lt;/a&gt;

<div class=“boxwrapper”>

<div class=“boxheader”>

</div>

<div class=“boxbody”>

content here; such as buttons etc. this i know doesnt cause the problem.

</div>

<span class=“boxbottom”><span></span></span>

</div>

rest of the file is after this.

the css is;

.boxwrapper {
width: 700px;
background: transparent;
padding-top: 15px;
padding-bottom: 15px;
}

.boxheader {
width: 700px;
height:31px;
background: #efefef url("{T_THEME_PATH}/images/boxheader.gif") no-repeat top right;
}

.boxbody {
padding: 0;
line-height: 1.48em;
color: #333333;
width: 698px;
clear: both;
border: #952121 solid;
border-width:1px 1px 0 1px;
background: #efefef url("{T_THEME_PATH}/images/postcontent.gif") repeat-x bottom left;
}

span.boxbottom{
font-size: 1px;
line-height: 1px;
display: block;
height: 13px;
width: 700px;
background: #efefef url("{T_THEME_PATH}/images/boxfooter.gif") repeat-x top left;
}

#header {
width:830px;
height:220px;
padding: 0 20px 0 20px;
background:#7E1111 url("{T_THEME_PATH}/images/n2pheader.png") no-repeat scroll center center;
clear:both;
}

#headerback {
float:left;
height:220px;
width:100%;
background:#7E1111 url("{T_THEME_PATH}/images/headersides.gif") repeat-x scroll center center;
}