Durch float-Angabe springt div ein Level höher

[Karpaty]

Hi,

Ich habe folgende Situation:

  
<div id="container">					  
	<ul id="navi">  
		<li>EINS</li>  
		<li>ZWEI</li>  
		<li>DREI</li>  
	</ul>	  
			  
	<div id="content">  
	        <h1> Home </h1>  
		<p>sehr langer text</p>  
	</div>  
				  
</div>  

  
#container{  
	margin:0 auto;  
	min-width:760px;  
	max-width:760px;  
	width:760px;  
	border: 1px solid black;  
}  
  
#navi{  
	list-style:none;  
}  
  
#content{  
	width:420px;  
	margin-left:20px;  
	float:right;  
	border:1px solid blue;  
}  

Also eigentlich ein div-Container mit einer Navigation und einem Textbereich. Der Textbereich soll rechts gefloatet werden aber dadurch springt er aus dem umgebenden div-Container raus und nur noch die Navi ist drin.
Woran liegt das?

Grüße Karpaty