problema con galeria para tiendas virtuales

[eresvey]

Hola amigos, pues primero agradecerles por leer esto:

La verdad es que estoy haciendo una galeria de productos con precios y titulos en css, que vienen desde la base de datos. Lo quiero hacer en mosaico la galeria pero en la segunda pagina me sale desordenado la imagen. ¿Como devo hacer para que todo me salga bien organizado?

Código HTML:

<div class="prod_box">
 
            <div class="center_prod_box">            
                 <div class="product_title"><a href="ver-co_'.$row["id_producto"].'-tienda_'.$row["id_tienda"].'-'.$d.'.html">'.$row['nom_producto'].'</a></div>
                 <div class="product_img"><a href="ver-co_'.$row["id_producto"].'-tienda_'.$row["id_tienda"].'-'.$d.'.html"><img src="http://localhost/tuluacomercial/files/'.$row["fot_miniatura"].'"  alt="" title="" border="0" /></a></div>
                 <div class="prod_price"><span class="reduce"></span> <span class="price">$'.$valor.'</span></div>                        
            </div>
           
            <div class="prod_details_tab"><a href="ver-co_'.$row["id_producto"].'-tienda_'.$row["id_tienda"].'-'.$d.'.html" class="prod_details">Ver</a>            </div>                     
        </div>
 

y el css:

Código CSS:

.prod_box{
width:173px;
height:auto;
float:left;
margin:10px;
text-align: center;
padding:8px;
}
.center_prod_box{
width:173px;height: 
auto;float:left; 
text-align:center;
padding:8px; 
margin:0px; 
border:1px #F0F4F5 solid;
}
.prod_details_tab{
width:173px;
height:31px;
float:left;
margin:3px 0 0 0;
}
 

[lizfranco]

A la clase .center_prod_box cámbiale el height:auto; por un alto definido (no lo dejes en auto).

Y El link de 'ver' colocalo dentro de la clases .center_prod_box. Y este link ya no neceita 'float:left'

Código HTML:

 <div class="prod_box">
     
                <div class="center_prod_box">            
                     <div class="product_title"><a href="ver-co_'.$row["id_producto"].'-tienda_'.$row["id_tienda"].'-'.$d.'.html">'.$row['nom_producto'].'</a></div>
                     <div class="product_img"><a href="ver-co_'.$row["id_producto"].'-tienda_'.$row["id_tienda"].'-'.$d.'.html"><img src="http://localhost/tuluacomercial/files/'.$row["fot_miniatura"].'"  alt="" title="" border="0" /></a></div>
                     <div class="prod_price"><span class="reduce"></span> <span class="price">$'.$valor.'</span></div>  
                     <div class="prod_details_tab"><a href="ver-co_'.$row["id_producto"].'-tienda_'.$row["id_tienda"].'-'.$d.'.html" class="prod_details">Ver</a> </div>                           
                </div>
               
                               
            </div> 

Código HTML:

    .prod_box{
    width:173px;
    height:auto;
    float:left;
    margin:10px;
    text-align: center;
    padding:8px;
    overflow:hidden; /* NEW*/
    }
    .center_prod_box{
    width:173px;
    height:300px;  /* NEW*/
    float:left;
    text-align:center;
    padding:8px;
    margin:0px;
    border:1px #F0F4F5 solid;
    }
    .prod_details_tab{
    width:173px;
    height:31px;
    /*float:left;*/
    margin:3px 0 0 0;
    }

[eresvey]

Iniciado por lizfranco

A la clase .center_prod_box cámbiale el height:auto; por un alto definido (no lo dejes en auto).

Y El link de 'ver' colocalo dentro de la clases .center_prod_box. Y este link ya no neceita 'float:left'

Código HTML:

 <div class="prod_box">
     
                <div class="center_prod_box">            
                     <div class="product_title"><a href="ver-co_'.$row["id_producto"].'-tienda_'.$row["id_tienda"].'-'.$d.'.html">'.$row['nom_producto'].'</a></div>
                     <div class="product_img"><a href="ver-co_'.$row["id_producto"].'-tienda_'.$row["id_tienda"].'-'.$d.'.html"><img src="http://localhost/tuluacomercial/files/'.$row["fot_miniatura"].'"  alt="" title="" border="0" /></a></div>
                     <div class="prod_price"><span class="reduce"></span> <span class="price">$'.$valor.'</span></div>  
                     <div class="prod_details_tab"><a href="ver-co_'.$row["id_producto"].'-tienda_'.$row["id_tienda"].'-'.$d.'.html" class="prod_details">Ver</a> </div>                           
                </div>
               
                               
            </div> 

Código HTML:

    .prod_box{
    width:173px;
    height:auto;
    float:left;
    margin:10px;
    text-align: center;
    padding:8px;
    overflow:hidden; /* NEW*/
    }
    .center_prod_box{
    width:173px;
    height:300px;  /* NEW*/
    float:left;
    text-align:center;
    padding:8px;
    margin:0px;
    border:1px #F0F4F5 solid;
    }
    .prod_details_tab{
    width:173px;
    height:31px;
    /*float:left;*/
    margin:3px 0 0 0;
    }

Muchas gracias amigo todo esta muy claro