Tengo el siguiente codigo:
Código HTML:
<html>
<head>
<title></title>
<style type="text/css">
body {margin:0;}
div.contenedor {width:600px;position:relative;background:#FF0000;margin:25px 0 0 0;}
div.contenedor span {color:#FFFFFF;float:left;text-indent:20px;}
div.contenedor img {float:right;clear:both;margin:0;}
div.contenedor div.clear {clear:both;}
</style>
</head>
<body>
<div class="contenedor">
<img src="paseo1.jpg" width="115" height="86">
<img src="paseo1.jpg" width="115" height="86">
<span>
PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA<br>
PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA<br>
PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA<br>
</span>
<div class="clear"></div>
</div>
<div class="contenedor">
<img src="paseo1.jpg" width="115" height="86">
<img src="paseo1.jpg" width="115" height="86">
<span>
PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA<br>
PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA<br>
PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA<br>
</span>
</div>
</body>
</html> En IE6 funciona perfecto, y aunque me cueste creerlo, el problema lo tengo en FF. Quiero un <div> rojo, donde el <span> tendrá una sangría y las imágenes se irán colocando a la derecha del <span>, una debajo de otra.
Como podrán ver en IE funciona perfecto, pero en FF hace unos movimientos raros. Probé sacando el atributo float:left del span, y se corrige todo, salvo que no me deja la sangría.
Espero que me entiendan.
Desde ya muchas gracias.