background not repeating in firefox

#contentbegin{
margin: 0 auto;
width: 850px;
background: #fff url(images/contentbg.gif);
height: auto;
}
#contentbody{
float: left;
position: relative;
top: -50px;
width: 550px;
text-align: left;
margin-left: 20px;
}

<div id="contentbegin">
<div id="contentbody">
<p>Blah</p>
<p>Blah</p>
</div>
</div>

It works in IE but having it work in IE doesnt mean jack. I tried using overflow: hidden but then i lost the top: -50px from #contentbody - any assistance will be great. thanks in advance

You need to clear your floats.
http://positioniseverything.net/easyclearing.html

Hi

Remove float: left;

i.e.

#contentbody{
position: relative;
top: -50px;
width: 550px;
text-align: left;
margin-left: 20px;
}

Then it repeats or

#clear{
clear: both;
}



<div id="clear"></div>