Div non sta al suo posto

[Sonikag]

Ho questa impaginazione:

<div id="logo">[img]images/ttt_01.gif[/img]</div>
<div id="container">
		
  <div id="banner"><div class="dx">[img]images/ttt1_03.gif[/img][img]images/ttt1_06.gif[/img][img]images/ttt1_12.gif[/img][img]images/ttt1_09.gif[/img]</div></div>
	

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

		<div id="footer">Paperino</div>
	</div>
</body>
</html>

Il mio css è così:

		body {
			margin:0px;
			padding: 0px;
		}

		#container {
			border-left: 18px solid #B6C3CD;
			border-right: 18px solid #B6C3CD;
			margin: 0px;
			margin-left: auto;
			margin-right: auto;
			padding: 0px;
		}

		#banner {
			padding: 1;
			margin-bottom: 1;
		}

		#content {
			padding: 1;
			background-color: gray;
		}

		#footer {
			clear: both;
			padding: 1;
			margin-top: 1;
			background-color: #B6C3CD;
		}
		
		logo {
		 position:absolute;
		 left:0px;
		 top:0px;
		 width:175px;
		 height:43px;
		 z-index:1;
		}
		
	.dx {
			float: right;
			margin: 0px;
		}

il banner viene visualizzato all'altezza del content anzichè alla stessa altezza del logo come vorrei. Se tolgo il div logo tutto torna come dovrebbe stare.

Sonia