overlapping div's verticaly

[Tidus97]

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

http://img142.imageshack.us/img142/3889/bugzb8.png

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">

<a id="top" name="top" accesskey="t"></a>
<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;
}

[DDD]

I can tell you right now to take a look at your floats. as well as look at your nesting. If this is your actual code looks like some divs are not closed in order. Also "<center>" is a depricated.

[Tidus97]

the divs are indeed broke, but its the header file for phpbb, so the div's are closed later on. ;)

also, what can i use other than center? i was planning to remove it, only using it temporarily as i had no other way of centering.

[Tidus97]

never mind my previous question.

margin: 0 auto;

*facepalm* hehe