mi menu desaparece detras de una imagen, no empuja el clear

[ras_chalo]

hola, estoy desarrollando un menu (vertical) dinamico, y la cosa es que abajo de mi menu hay una imagen jpg que al crecer el menu, esta no crece, me explico.

Código PHP:

<div class="gadget">
          <h2 class="star">Productos</h2>
          <div class="clr"></div>
          <?php
          include("conexion.php");
          $query= mysql_query('SELECT * FROM categorias ') or mysql_error();    
                         
           ?>
          <ul class="sb_menu">
          <?php 
           while($row= mysql_fetch_array($query))
             {             
             ?> 
            <li id="<?php echo $row['id_categ']; ?>"><a href="<?php echo "detalle_prod.php?id_cat=".$row['id_categ'];?>"><?php echo $row['id_categ']; ?></a>                    </li>
            
          <?php } ?>
          
          </ul>
          <div class="clr"></div>
        </div>        
        <!--FIN MENU PRODUCTOS-->       
        <div class="clr"></div>
        <img src="images/images.jpg" />
      </div>
 

si se fijan, tengo unos clear (clr) entre medio de la imagen y el menu que ira creciendo a medida que se le agregan productos...


a continuacion dejo el codigo de aquel clear

Código CSS:

.clr {
    
    clear:both;
    padding:0;
    margin:0;
    width:100%;
    font-size:0;
    line-height:0;
}
 

la idea es que a medida que la lista de productos cresca (menu), baje la iamgen como corresponde...eh provado metiendole el clear por todos lados y nada...

alguna idea?
saludos y espero sus comentarios!!