¿Cómo puedo arreglar esto?, me tiene loco!!

[pempas]

Hola,
ante todo gracias por ayudar, me vuelvo loco cada vez que me pasa esto:



¿Cómo puedo hacer que no se desplace ese div?, el css es este:

Código PHP:

  .prod_box{
width:173px;
height:auto;
float:left;
padding:10px 10px 10px 11px;
}
.top_prod_box{
width:173px;height:12px;background:url(images/product_box_top.gif) no-repeat center bottom;float:left; padding:0px; margin:0px;
}
.bottom_prod_box{
width:173px;height:10px;background:url(images/product_box_bottom.gif) no-repeat center top;float:left;padding:0px; margin:0px;
}
.center_prod_box{
width:173px;height: auto;background:url(images/product_box_center.gif) repeat-y;float:left; text-align:center;padding:0px; margin:0px;
}
.prod_details_tab{
width:173px;
height:31px;
float:left;
background:url(images/products_details_bg.gif) no-repeat center;
margin:3px 0 0 0;
}
img.left_bt{
float:left;
padding:6px 0 0 6px;
}
a.prod_details{
width:25px;
display:block;
float:left;
background:url(images/square-blue-add.gif) no-repeat left;
padding:0 0 0 20px;
margin:7px 0 0 38px;
_margin:6px 0 0 35px;
text-decoration:none;
color:#0fa0dd;
} 
   

Lo cierto es que no sé como resolverlo y me pasa mucho... he probado con clear, con word-break, de todo... nada funciona!

Gracias a todo el mundo!

[RadamantiusS]

Es por la doble linea del texto, si el titulo "Articulo prueba de importacion prueba.com" fuera en una sola linea como las dos que la siguen no se descuadraría. Prueba con reducir el tamaño de la letra con el fin que te alcanze en una sola linea

[PrendekZ]

Para tener filas equilibradas yo haría lo siguiente, HTML:

<div id="filaEquilibrada">
<div id="item"></div>
<div id="item"></div>
<div id="item"></div>
</div>

CSS:

#filaEquilibrada{overflow:hidden; margin:10px 0;}
#filaEquilibrada #item{width:200px; height:auto; float:left; margin:0 5px;}

Modifica valores como creas necesario!

Saludos!

[sanxuan]

Otra posibilidad es combinar posicionamiento absoluto y relativo. El contenedor tendría un alto y ancho fijos.
Colocaríamos la imagen por detrás del texto y los textos por encima. De esta manera si el texto sobrepasa el alto previsto se mostraría por encima de la imagen sin desplazarla.

[jalex16]

o dale un max-height a la capa, o coloca un <div style="clear: both"></div> entre cada fila.