Div + span + IMG a la derecha

Jamati · #1 (**permalink**) 17/07/2008, 11:48

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.

Mikmoro · #2 (**permalink**) 17/07/2008, 12:05

Yo lo haría así:

Cita:

<html>
<head>
<title></title>
<style type="text/css">
body {margin:0;}
div.contenedor {width:600px;position:relative;background:#F00;mar gin:25px 0 0 0; overflow: auto;}
div.contenedor span {text-indent:20px; color:#FFF;display: block;}
div.contenedor img {margin:0;}
div.imagenes {float: right;width: 115px;}
</style>
</head>
<body>
<div class="contenedor">
<div class="imagenes">
<img src="paseo1.jpg" width="115" height="86">
<img src="paseo1.jpg" width="115" height="86">
</div>
<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>

<div class="contenedor">
<div class="imagenes">
<img src="paseo1.jpg" width="115" height="86">
<img src="paseo1.jpg" width="115" height="86">
</div>
<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>

Mikel.

Jamati · #3 (**permalink**) 17/07/2008, 15:21

Muchas gracias, problema solucionado.
Mezclando la ayuda que me pasaste, terminé haciendo esto:

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;overflow:auto;}
div.contenedor span {color:#FFFFFF;text-indent:20px;display:block;}
div.contenedor img {float:right;clear:both;margin:0;}
</style>
</head>
<body>
<div class="contenedor">
<img src="paseo1.jpg" width="115" height="86">
<span>
PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA PRUEBA<br>
</span>
</div>
</body>
</html>

Saqué el div.imagenes porque no siempre iban a ser del mismo tamaño, y aparte para no crear un div más, dejé los img así nomás dentro del div.contenedor.

De esta forma los atributos que vos me habias puesto en:

Cita:

div.imagenes {float: right;width: 115px;}

yo se los puse dentro del div.contenedor img

está bien igual, no ?
Nuevamente muchísimas gracias.

Mikmoro · #4 (**permalink**) 17/07/2008, 16:49

Sí, también es correto. Y hasta más secillo.

Mikel.

Jamati · #5 (**permalink**) 18/07/2008, 11:53

Muchas gracias Mike.
Espero que les sirva a otros.

Saludos.