Problem with div box backgrounds

Hi WPeople o/

I’m working in my first theme and my XHTML knowledge wasnt used for some years so this might be really easy problem and i just dont get it ??

My index page basicalle looks like that

headerinclude
————-

<div id="container">
 <div id="posts">
   ...
 </div>
 <div id="sidebar>
   ...
 </div>
</div>

————–
footerinclude

css looks something like that:

body{
        ...
        background: #000000;
        ...
}
#container {
        position: relativ;
        top: 242px;
        width: 950px;

        background: #505050;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
}
#posts{

	float: left;
	width: 600px;
        background: #7a7a7a;
}
#sidebar{
	float: right;
	width: 350px;
        background: #505050;
	margin: 0 0 0 0px;

}

—–
so my “container” div is just a div to group the posts and sidebar together. I do this because the sidebar container ends when the content of it ends and the background color of it stops there. But i want the background color of the sidebar to continue as far as the posts-div goes. For that i tried to use the container div to show the general background color i want.

In IE it seems to work, but in both Chrome & Firefox, i have the problem that after the sidebar content, i get the body background color down to the start of the footer and not the background of the container-div.

How can i make this work in all browsers?