Float zerhaut Div Anordnung in Firefox

[SE]

Hallo allerseits,

habe folgendes Problem:

Ich habe eine dreispaltige Seite, rein in CSS formatiert (keine Tables). In der mittleren Spalte möchte ich wiederum Div Elemente haben, die untereinander angeordnet werden sollen.

Das funktioniert auch weitestgehend. Wenn ich allerdings in den Div Elementen weitere Divs verwende, und diese per Float positioniere, dann zerhaut es die Anordnung im Firefox (3).

Wenn die Div Elemente mit dem "float: left" und "clear: left" rausgenommen werden (also <div class="category_product_item_pic"> und <div class="clear_left">), dann funktioniert es.

Das Problem tritt nur dann auf, wenn die linke oder rechte Spalte größer ist, als die mittlere. Um dies zu simulieren ist das "min-height: 1000px;" im linken Menü.

CSS

/* Helferlein */  
  
   div.clear_left {  
    clear: left;  
   }  
  
   /* Globales Zeug  + Menü */  
  
   div#container {  
    width: 100%;  
   }  
  
   div#headline {  
    background-image: url({{$tpl_path_images}}navigation/headline.jpg);  
    background-repeat: no-repeat;  
    background-position: center;  
    width: 100%;  
    height: 150px;  
   }  
  
   div#menu_left {  
  
    min-height: 1000px;  
  
    float: left;  
    width: 160px;  
  
    margin: 0;  
    padding: 0 10px 0 10px;  
  
    font-size: 13px;  
  
   }  
  
   div#menu_right {  
  
    float: right;  
    width: 160px;  
  
    margin: 0;  
    padding: 0 10px 0 10px;  
  
    font-size: 13px;  
  
   }  
  
   div#content {  
  
    background-color: #ffffff;  
    border: 1px solid #666666;  
  
    margin: 0px 200px 0px 200px;  
    padding: 10px;  
  
    font-size: 13px;  
  
    /* min-height: 400px; */  
  
   }  
  
  
  
   /* Kategorie Ansicht */  
  
   div.category_product_item_pic {  
    width: 120px;  
    height: 168px;  
  
    background-color: #000000;  
  
    float: left;  
   }

<div id="container">  
  
   <div id="menu_left"></div>  
  
   <div id="menu_right"></div>  
  
   <div id="content">  
  
    <div class="category_product_item">  
  
     <div class="category_product_item_pic"></div>  
  
     <div class="category_product_item_text">  
      <div class="category_product_item_heading">&Uuml;berschrift 1</div>  
      <div class="category_product_item_description">Text 1</div>  
     </div>  
  
     <div class="clear_left"></div>  
  
    </div>  
  
    <div class="category_product_item">  
  
     <div class="category_product_item_pic"></div>  
  
     <div class="category_product_item_text">  
      <div class="category_product_item_heading">&Uuml;berschrift 2</div>  
      <div class="category_product_item_description">Text 2</div>  
     </div>  
  
     <div class="clear_left"></div>  
  
    </div>  
  
    <div class="category_product_item">  
  
     <div class="category_product_item_pic"></div>  
  
     <div class="category_product_item_text">  
      <div class="category_product_item_heading">&Uuml;berschrift 3</div>  
      <div class="category_product_item_description">Text 3</div>  
     </div>  
  
     <div class="clear_left"></div>  
  
    </div>  
  
   </div> <!-- id="content" -->  
  
   <div id="footline"></div>  
  
  </div>