Table con float:right

Wing · #1 (**permalink**) 13/03/2009, 10:57

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?

Mikmoro · #2 (**permalink**) 13/03/2009, 16:28

¿Tienes un doctype en tu página?

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Wing · #3 (**permalink**) 15/03/2009, 05:39

Sí, pero el Transitional

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Wing · #4 (**permalink**) 18/03/2009, 04:37

¿Nadie tiene una solución?

Mikmoro · #5 (**permalink**) 18/03/2009, 06:18

Bueno, pegué tu código en un HTML con un doctype como el que te puse y no vi el problema: las tablas estaban pegadas a la derecha, tanto en IE como en FF.

Wing · #6 (**permalink**) 20/03/2009, 09:46

Gracias, ya encontré el problema, estaba en el div padre.