Aquí dejo el codIgo css y html.
Agradecería mucho alguna idea o luz para solucionar el problema.
css:
Código PHP:
*{
margin: 0;
padding: 0;
}
body{
text-align: center;
font-size: small;
font-family: Georgia, "Times New Roman", serif;
background: #369;
}
img{
display: block;
margin: 0;
padding: 0;
border: 0;
}
#home-productos-destacados{
width: 438px;
height: 420px;
margin: 15px auto 0 auto;
padding: 0px 0px 0px 0px;
background-color:#ccc;
text-align: center;
clear: both;
overflow: hidden;
}
.producto-destacado{
width: 207px;
height: 119px;
background-color:red;
float: left;
overflow: hidden;
padding: 0px;
margin: 0 12px 12px auto;
}
.producto-destacado-header{
width: 207px;
height: 11px;
background-color:#fff;
text-align: left;
margin: 0px;
padding: 0px;
clear: both;
}
.producto-destacado-codigo{
width: 207px;
height: 11px;
background-color:#fff;
margin: 0px;
padding: 0px;
}
.producto-destacado-codigo p{
font-family: Verdana, Arial, Helvetica, Sans Serif;
font-size: 9px;
color: #333;
margin: 0px;
padding: 0px;
line-height: 8px;
}
.producto-destacado-center{
width: 207px;
height: 93px;
margin: 0px;
padding: 0px;
background-color:#fff;
text-align: left;
clear: both;
}
.producto-destacado-img{
width: 108px;
height: 93px;
margin: 0px;
padding: 0px;
background-color:#ccc;
float: left;
}
.producto-destacado-resumen{
width: 99px;
height: 93px;
margin: 0px;
padding: 0px;
background-color:#fff;
float: left;
}
.producto-destacado-resumen h3{
font-family: Verdana, Arial, Helvetica, Sans Serif;
font-size: 11px;
FONT-WEIGHT: bold;
color: #AE0D01;
margin: 0px;
border: 0;
padding: 5px;
line-height: 11px;
}
.producto-destacado-resumen p{
font-family: Verdana, Arial, Helvetica, Sans Serif;
font-size: 11px;
color: #333;
margin: 0px;
padding: 0px 5px 0px 5px;
line-height: 11px;
}
.producto-destacado-footer{
width: 207px;
height: 15px;
margin: 0px;
padding: 0px;
background-color: #ccc;
text-align: left;
overflow: hidden;
}
.imagen-zoom{
width: 17px;
height: 15px;
margin: 0px;
padding: 0px;
border-right: 1px solid #fff;
background-color: #fff;
float: left;
clear: none;
}
.producto-info{
width: 37px;
height: 15px;
margin: 0px;
padding: 0px;
border-right: 1px solid #fff;
background-color: #fff;
float: left;
clear: none;
}
.producto-add{
/*width: 26px;*/
width: 104px;
height: 15px;
margin: 0px;
padding: 0px;
/*border-right: 78px solid #fff;*/
background-color: #999;
float: left;
clear: none;
}
.ver-mas{
width: 47px;
height: 15px;
margin: 0px;
padding: 0px;
background-color: #fff;
float: left;
clear: none;
}
html:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Banquete</title>
<link rel="STYLESHEET" type="text/css" href="estilo.css" />
</head>
<body>
<div id="home-productos-destacados">
<!-- INICIA LOOP PRODUCTOS DESTACADOS -->
<!-- INICIA PRODUCTO -->
<div class="producto-destacado">
<div class="producto-destacado-header">
<div class="producto-destacado-codigo">
<p>COD: 123456</p>
</div>
</div>
<div class="producto-destacado-center">
<div class="producto-destacado-img">
<img src="productos-001.jpg" alt="Producto Titulo" title="Producto Titulo" />
</div>
<div class="producto-destacado-resumen">
<h3>CARAMELO Y HELADO</h3>
<p>Ideal para este verano es este exisito postre con helado de vainilla y ...</p>
</div>
</div>
<div class="producto-destacado-footer">
<div class="imagen-zoom">
<img src="productos-img.jpg" alt="Agrandar Imágen" title="Agrandar Imágen" />
</div>
<div class="producto-info">
<img src="productos-info.jpg" alt="Detalle Producto" title="Detalle Producto" />
</div>
<div class="producto-add">
<img src="productos-add.jpg" alt="Agregar al Carro" title="Agregar al Carro" />
</div>
<div class="ver-mas">
<img src="productos-leermas.jpg" alt="Agregar al Carro" title="Agregar al Carro" />
</div>
</div>
</div>
<!-- FIN PRODUCTO -->
<!-- INICIA PRODUCTO -->
<div class="producto-destacado">
<div class="producto-destacado-header">
<div class="producto-destacado-codigo">
<p>COD: 123456</p>
</div>
</div>
<div class="producto-destacado-center">
<div class="producto-destacado-img">
<img src="productos-001.jpg" alt="Producto Titulo" title="Producto Titulo" />
</div>
<div class="producto-destacado-resumen">
<h3>CARAMELO Y HELADO</h3>
<p>Ideal para este verano es este exisito postre con helado de vainilla y ...</p>
</div>
</div>
<div class="producto-destacado-footer">
<div class="imagen-zoom">
<img src="productos-img.jpg" alt="Agrandar Imágen" title="Agrandar Imágen" />
</div>
<div class="producto-info">
<img src="productos-info.jpg" alt="Detalle Producto" title="Detalle Producto" />
</div>
<div class="producto-add">
<img src="productos-add.jpg" alt="Agregar al Carro" title="Agregar al Carro" />
</div>
<div class="ver-mas">
<img src="productos-leermas.jpg" alt="Agregar al Carro" title="Agregar al Carro" />
</div>
</div>
</div>
<!-- FIN PRODUCTO -->
<!-- INICIA PRODUCTO -->
<div class="producto-destacado">
<div class="producto-destacado-header">
<div class="producto-destacado-codigo">
<p>COD: 123456</p>
</div>
</div>
<div class="producto-destacado-center">
<div class="producto-destacado-img">
<img src="productos-001.jpg" alt="Producto Titulo" title="Producto Titulo" />
</div>
<div class="producto-destacado-resumen">
<h3>CARAMELO Y HELADO</h3>
<p>Ideal para este verano es este exisito postre con helado de vainilla y ...</p>
</div>
</div>
<div class="producto-destacado-footer">
<div class="imagen-zoom">
<img src="productos-img.jpg" alt="Agrandar Imágen" title="Agrandar Imágen" />
</div>
<div class="producto-info">
<img src="productos-info.jpg" alt="Detalle Producto" title="Detalle Producto" />
</div>
<div class="producto-add">
<img src="productos-add.jpg" alt="Agregar al Carro" title="Agregar al Carro" />
</div>
<div class="ver-mas">
<img src="productos-leermas.jpg" alt="Agregar al Carro" title="Agregar al Carro" />
</div>
</div>
</div>
<!-- FIN PRODUCTO -->
<!-- INICIA PRODUCTO -->
<div class="producto-destacado">
<div class="producto-destacado-header">
<div class="producto-destacado-codigo">
<p>COD: 123456</p>
</div>
</div>
<div class="producto-destacado-center">
<div class="producto-destacado-img">
<img class="producto-destacado-img2" src="productos-001.jpg" alt="Producto Titulo" title="Producto Titulo" />
</div>
<div class="producto-destacado-resumen">
<h3>CARAMELO Y HELADO</h3>
<p>Ideal para este verano es este exisito postre con helado de vainilla y ...</p>
</div>
</div>
<div class="producto-destacado-footer">
<div class="imagen-zoom">
<img src="productos-img.jpg" alt="Agrandar Imágen" title="Agrandar Imágen" />
</div>
<div class="producto-info">
<img src="productos-info.jpg" alt="Detalle Producto" title="Detalle Producto" />
</div>
<div class="producto-add">
<img src="productos-add.jpg" alt="Agregar al Carro" title="Agregar al Carro" />
</div>
<div class="ver-mas">
<img src="productos-leermas.jpg" alt="Agregar al Carro" title="Agregar al Carro" />
</div>
</div>
</div>
<!-- FIN PRODUCTO -->
<!-- FINALIZA LOOP PRODUCTOS DESTACADOS -->
</div>
</body>
</html>