div unter float:left positionieren

[mjr85]

Guten Abend,
ich habe zu meine Problem schon im Internet gesucht, aber leider nicht das richtige gefunden. Lag auch daran das ich kein richtiges Schlagwort dafür habe. Deswegen hoff ich, ihr könnt mir helfen. Ich möchte ein DIV unterhalb eines aderen divs ( float:left) platzieren.

  
<div id="main">  
  <div id="top">Raum für den Inhalt von id "top"</div>  
  
 <div id="navigation">  
  
  <div class="menuItem_level1_no"><a href="#">MenuItem1</a></div>  
  <div class="menuItem_level1_act"><a href="#">MenuItem2 (act)</a></div>  
   <div class="menuItem_level2_no"> <a href="#">MenuItem 2.1</a></div>  
   <div class="menuItem_level2_act"> <a href="#">MenuItem 2.2(act)</a></div>  
  
  </div>  
  
  <div id="content">  
  
    <h1>Erste Überschrift</h1>  
    <p class="bodytext">Lorem ipsum dolor sit amet.</p>  
  
  </div>  
  <div id="bottom">Raum für den Inhalt von id "bottom"</div>  
</div>  
  

Der Navigations-Container ist in der CSS-Datei mit "float:left" ausgezeichnet. Der Container mit der id "bottom" soll unterhalb von dem Container mit der id "navigation" stehen.
Das soll unabhängig von dem Inhalt in "content" sein.
Ist der Inhalt in "content" lang genug, positioniert sich "bottom" prima unter "navigation"

Genau das soll er aber auch machen wenn "nichts" in "content" steht.

Wie kann ich "bottom" so auszeichnen, das genau das passiert?