float zerschießt mir mein Layout

[Benedikt]

Hallo zusammen,
ich habe heute ein Problem, was sich mit Sicherheit schnell lösen lässt, ich komm aber nicht drauf wie und google gibt mir auch nix passendes zurück.
Mein Problem ist folgendes:

ich bin dabei in Formular zu basteln welches aus 2 Spalten besteht in denen unterschiedliche Formularfelder stehen. Jetzt möchte ich, dass die Spalten von oben nach unten befüllt werden.
Wenn ich allerdings in der Defintion meiner Spalten float:left bzw. float:right einsetze, dann zerschießt es mir mein komplettes Layout. Nachfolgend poste ich euch mal meinen Style-Sheet. Es wäre echt super, wenn mir von euch da jemand weiterhelfen könnte.

Hier mein Style-Sheet:
<style>
body {
margin: 0;
background: #FFF;
}

	/\* Positioning Rules \*/  
	#container {  
		width: 900px;  
		margin: 0 auto;  
	}  
	  
	#titel {  
		position: relative;  
		height: 40px;  
		background: #999;  
		vertical-align: middle;  
		font: x-large h1, bold;  
	}  

	#subtitel {  
		position: relative;  
		height: 30px;  
		background: #CCC;  
		vertical-align: middle;  
		font: large h1, bold;  
	}  
	  
	#content {  
		position: relative;  
		padding: 20px 20px 60px 20px;  
		background: #fff;  
	}  
	  
	#left {  
		position: relative;  
		left: 0;  
		width: 50%;  
		background: #FFF;  
		float:left;  
		  
			  
	}  
	  
	#right {  
		position:relative;  
		left:50%;  
		right: 0;  
		width:50%;  
		background: #FFF;  
		float:left;  
	}  
</style>  

Ich dank euch schon jetzt für eure Mühen und Ratschläge.