Hola, tengo un catálogo de productos con una foto a la izquierda y una tabla de características a la derecha.
Código HTML:
<div id="contenido">
<div id="producto">
<h2>Farmacia</h2>
<div class="prod">
<img class="fotoprod" src="../img/productos/Pilfer28.jpg" alt="Linea Oftal de cuello estrecho" />
<table>
<caption>
Cuello Pilfer 28
</caption>
<tr>
.....
</table>
</div>
<div class="prod">
<img class="fotoprod" src="../img/productos/Pilfer28.jpg" alt="Linea Oftal de cuello estrecho" />
<table>
<caption>
Cuello Pilfer 28
</caption>
<tr>
.....
</table>
</div>
Esa es la disposición de los elementos, foto + tabla en el mismo div. Y así varios productos seguidos.
Y el CSS
Código:
#producto{
margin-bottom: 25px;
float: right;
margin-right: 40px;
width: 610px;
display: table;
}
#producto h2{
text-align: left;
color: #e30000;
font: bold 14px Arial, Helvetica, sans-serif;
margin-bottom: 15px;
}
.fotoprod{
float: left;
clear: none;
margin-top: 20px;
border: 1px solid #1f2c66;
}
#producto table{
border-collapse: collapse;
border: 1px solid #96ccff;
float: right;
clear: right;
}
El problema está en que la tabla no me hace el float: right y se me queda pegada a la foto. En IE, la primera tabla de la lista me hace el float: right pero el resto no. En FF ninguna.
No puedo poner un margin porque las fotos no son todas de la misma anchura y quiero que todas las tablas queden alineadas. Y con un position: absolute las puedo colocar a la derecha pero entonces se me montan las tablas unas encima de otras.
¿Alguien tiene alguna solución?