CSS problem

[avihai1]

hey, i tried making a container div with background and inside this container two other divs - one is the content and the other is sidebar. I used float on them to position them in the same line but somehow the background doesnt apply on them.

i mean, the logo and the menu have the background but those two divs have white background.
when i remove the float from both of the divs everything works just fine, which is weird because it should work even with the float.

anyway, here is the css:

#container {
	width: 800px;
	background: url('style/images/bg.png') repeat-y;
	margin: 0 auto;
	display: block;
}

#logo {
	display: block;
	width: 800px;
	height: 227px;
	background: url('style/images/logo.png') no-repeat;
}

#logo a {
	display: block;
	width: 151px;
	height: 144px;
	background: url('style/images/logo_a.png') no-repeat;
	float: right;
}

.navi {
	display: block;
	width: 750px;
	height: 41px;
	background: url('style/images/menu.png') no-repeat;
	margin: 20px auto 0 auto;
}

.navi ul {
	list-style-type: none;
	padding: 0 5px 0 5px;
}


.navi ul li {
	float: right;
	font-size: 12px;
	color: #000;
	margin: 7px 10px 0 10px;
}

.navi ul li.active {
	font-weight: bold;
}

.navi ul li a {
	font-size: 12px;
	text-decoration: none;
	color: #000;
	font-family: "BNSharon";
}

.sidebar {
	float: left;
	width: 230px;
}

/* post - page */

.content {
	padding: 10px 17px 10px 17px;
	float: right;
	width: 536px;
}

the html is :

		<div id="container">
			<div id="logo">
			</div>

		<div class="content">the content</div>
<div class="sidebar"></div>		
</div>
		<div style="clear:both"></div>
		<div id="footer">&copy; 2010</div>

thanks.

[cahva]

You have misplaced the clear. Put the clear after sidebar before closing #container.