css problems with parent and child, content background wont layout correctly

I am building the content section of my web site, and I wanted to do a test to make sure I could put things side by side using float:left, right etc... On my web site I was able to get 2 boxes next to one another, but the background container the boxes are in wont center on 1000px's and fill up the whole content background. Once you look at my site you will understand...I know the problem is in my css, please help. The rest of my site I contained with a background that was 100% then inside that I made containers that were 1000px. I dont know why it is not working now because it worked with the top banner and the menubar. THANKS AS ALWAYS!

site:

http://www.nestudiosonline.com/test.php

html:

<div id="contentbackground">
开发者_开发百科    <div id="content">
    <div id="flashbanner"></div><div id="test"></div>
    </div>
    </div>

css:

@charset "utf-8";

#contentbackground
{
width:100%;
height:auto;
margin-top:0px;
margin-left:0px;
margin-bottom:0px;
margin-right:0px;
padding-top:0px;
padding-left:0px;
padding-bottom:0px;
padding-right:0px;
border:0
}

#content
{
background-color:#FFF;
/* for IE */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter:alpha(opacity=80);
/* CSS3 standard */
opacity:.8;
width:1000px;
height:auto;
margin-top:0px;
margin-left:auto;
margin-bottom:0px;
margin-right:auto;
padding-top:10px;
padding-left:5px;
padding-bottom:5px;
padding-right:5px;
border:solid;
border-width:1px
}

#flashbanner
{
float:left;
display:inline;
width:500px;
height:200px;
margin:0px;
padding:0px;
border:solid;
border-width:1px
}

#test
{
float:right;
width:400px;
height:200px;
margin:0px;
padding:0px;
border:solid;
border-width:1px
}

I am not sure if I understand correctly, but putting overflow: hidden on your #content should make everything cool.

EDIT: and also a clear: both on the same element.

EDIT: I applied these changes in Firebug and it seems to work fine.

First add overflow:hidden; for #linksbackground and #content. Then you have to understand that you have set the background on your body, so this behavior is logical. To achieve what you want, you need to create a wrapper div, under below the body tag, and close it before the </body> . Give an id #wrapper for this div and add the following properties

#wrapper {
    background: url("../images/olddkeshant3.jpg") no-repeat scroll 0 0 transparent;
    margin: 0 auto;
    width: 1000px;
}

then remove the background from the #bodybackground.

To position the background in a specific position you can change the above values 0 0 in the background property to anything that fit your needs.

A percentage X aligns the point X% across (for horizontal) or down (for vertical) the image with the point X% across (for horizontal) or down (for vertical) the element's padding box. For example, with a value pair of '0% 0%',the upper left corner of the image is aligned with the upper left corner of the padding box. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of the padding box. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding box.

source: http://www.w3.org/TR/CSS2/colors.html#propdef-background-position