CSS og Float og Firefox:?

Hej

Jeg har et lille problem med min CSS i Firefox, når jeg bruger Float..

her er min html opbygning:
<body>
    <form id="form1" runat="server">
        <div id="Total">
            <div id="TopPage">
                <div id="TopContent">
                </div>
            </div>
            <div id="BottomPage">
                <div id="BottomPageContainer">
                    <div id="BottomLeft">
                    </div>
                    <div id="BottomRight">
                        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                        </asp:ContentPlaceHolder>
                    </div>
                </div>
            </div>
        </div>
        <div id="ClearBoth">
        </div>
    </form>
</body>

og her min CSS:
body
{
    background-color: #ebebeb;
}
#Total
{
}
#TopPage
{
}
#TopContent
{
}
#BottomPage
{
    margin: 0 auto 0 auto;
    background-image: url(/App_Themes/Default/Images/BodyBackground.gif);
    background-repeat: repeat-y;
    width: 970px;
}
#BottomPageContainer
{
    width: 950px;
    margin: 0 auto 0 auto;
}
#BottomLeft
{
    float: left;
    width: 250px;
}
#BottomRight
{
    float: right;
    width: 700px;
}
#ClearBoth
{
    clear: both;
}


billedet er blot nogle kanter i siderne, som bliver repeatet nedad.
men men....

ligeså snart at der er indhold i min BottomRight og BottomLeft (som bliver positioneret i Float)
så repeater billedet ikke i FireFox (Eller Opera)..
men det virker i IE7.

så..
hvad gør man så...?
skal man bruge noget andet en Float, eller er der en måde hvorpå man kan løse problemet..???

på forhånd tak..