Ho fatto una prova che non va

codice:
<html>
<head>
	<style type="text/css">
		#container {
			border: 1px solid gray;
			margin: 10px;
			margin-left: auto;
			margin-right: auto;
			padding: 10px;
		}

		#banner {
			padding: 0;
			margin-bottom: 0;
			background-color: rgb(213, 219, 225);
		}

		#content {
			padding: 0;
			background-color: gray;
			width:750px;
		}

		#sidebar-a {
			float: left;
			width: auto;
			margin: 0;
			margin-right: 0;
			padding: 0;
			background-color: rgb(235, 235, 235);
		}

		#sidebar-b {
			float: right;
			width: auto;
			margin: 0;
			margin-left: 0;
			padding: 0;
			background-color: rgb(235, 235, 235);
		}

		#footer {
			clear: both;
			padding: 0;
			margin-top: 0;
			
			background-color: rgb(213, 219, 225);
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="banner"></div>

		<div id="sidebar-a"></div>

		<div id="sidebar-b"></div>

  <div id="content">sdfsdfsdf</div>

		<div id="footer"></div>
	</div>
</body>
</html>
Ho provato anche a sostituire la width di sidebar a e sidebar b con 50% o 100% ma dopo mi manda ogni colonna a capo