Flotar imagen a la derecha de texto

the_web_saint · #1 (**permalink**) 20/11/2008, 08:20

Buenas compañeros:

No se si estoy bloqueado por falta de sueño o que. Pero no puedo hacer que la imagen flote al lado derecho del texto, la imagen me la coloca a la derecha, pero despues que termina el texto. Les dejo un ejemplo de lo que tengo. ¿Que tendría que corregir?

Código HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div style="border:#000033 solid 1px; width:90%;">
<div style="margin-right:300px; background-color:#00FF00; border:#333300 solid 1px;">
aaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa
aaaaaa aaaaaaaaaaaaaaaaaaaaa aaa
aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaa
aaaaaaa aaaaaaaaaaaa aaaaaaa aaa
aaaa aaaaaaa aaaaaaaaaa aaaaaaa aaa
aaaaaaa aaaaaa aaaaaaaaaa aaaaaaaa aaaaaaaaa aaaaaaa aaaaaaaa aaaaaaa aaaaaaaaaa aaaaaaa aaaaaaa a a aaaaaaa aaaaaaaaa aaaaaa  
aaaaaaa aaaaa aaaaa aaaaa
aaaaa aaaaaaa aaaaaaa
aaaaaaaa aaaaaaaaa
aaaaaaaaa aaaaaaaaaa
</div>
<div style="margin:0px; float:right; border:#009900 solid 1px; width:250px;"><img src="band_ing.jpg" width="250" height="250"/></div>
<div style="clear:both;"></div>
</div>
</body>
</html>

Saludos

kseso? · #2 (**permalink**) 20/11/2008, 08:37

Coloca todo tu texto y la imagen en <p></p>, y con propiedades "
p {display: inline;
float:left;}
Para la imagen crea una clase
p imagen {display: inline}
junto al resto de propiedades

Un saludo

willyfc · #3 (**permalink**) 20/11/2008, 09:17

hola the_web_saint

lo que pasa es que para comenzar tu div con el texto no tiene un ancho y tiene que flotar a la izquierda por que la imagen esta flotando a la derecha y el margin- right de 300px no deja que la imagen suba.

Creo que algo así:

Código HTML:

<div style="border:#000033 solid 1px; width:90%;">
<div style="background-color:#00FF00; border:#333300 solid 1px; float:left; width:70%">
aaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa
aaaaaa aaaaaaaaaaaaaaaaaaaaa aaa
aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaa
aaaaaaa aaaaaaaaaaaa aaaaaaa aaa
aaaa aaaaaaa aaaaaaaaaa aaaaaaa aaa
aaaaaaa aaaaaa aaaaaaaaaa aaaaaaaa aaaaaaaaa aaaaaaa aaaaaaaa aaaaaaa aaaaaaaaaa aaaaaaa aaaaaaa a a aaaaaaa aaaaaaaaa aaaaaa  
aaaaaaa aaaaa aaaaa aaaaa
aaaaa aaaaaaa aaaaaaa
aaaaaaaa aaaaaaaaa
aaaaaaaaa aaaaaaaaaa
</div>
<div style="margin:0px; float:right; border:#009900 solid 1px; width:250px;"><img src="band_ing.jpg" width="250" height="250"/></div>
<div style="clear:both;"></div>
</div>

Espero te sirva

the_web_saint · #4 (**permalink**) 20/11/2008, 09:19

kseso Lo que dices es esto?

Código HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
p{
display: inline; float:left;
}
p imagen{
display: inline;
}
</style>
</head>

<body>
<div style="border:#000033 solid 1px; width:50%;">
<p>
aaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa
aaaaaa aaaaaaaaaaaaaaaaaaaaa aaa
aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaa
aaaaaaa aaaaaaaaaaaa aaaaaaa aaa
aaaa aaaaaaa aaaaaaaaaa aaaaaaa aaa
aaaaaaa aaaaaa aaaaaaaaaa aaaaaaaa aaaaaaaaa aaaaaaa aaaaaaaa aaaaaaa aaaaaaaaaa aaaaaaa aaaaaaa a a aaaaaaa aaaaaaaaa aaaaaa  
aaaaaaa aaaaa aaaaa aaaaa
aaaaa aaaaaaa aaaaaaa
aaaaaaaa aaaaaaaaa
aaaaaaaaa aaaaaaaaaa
<img src="band_ing.jpg" width="100" height="100" class="imagen"/>
</p>
<div style="clear:both;"></div>
</div>
</body>
</html>

De esa forma no me funciona, no se si te entendi mal.

Saludos y Gracias por responder

willyfc, probaré tu aporte, gracias por responder

EDITADO:
Ok, me ha servido el aporte de Willyfc, pero quieres decir que cuando le da un margen, no deja subir el otro elemento?, porque pensaba que si era posible.

Mikmoro · #5 (**permalink**) 20/11/2008, 09:30

Bueno, yo te diría que simplemente metas la imagen antes del texto en la caja, y que le pongas float: right:

Cita:

<div style="background-color:#00FF00; border:#000033 solid 1px; width:90%;">
<img src="band_ing.jpg" class="imagen"/>
aaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaa
aaaaaa aaaaaaaaaaaaaaaaaaaaa aaa
aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaa
aaaaaaa aaaaaaaaaaaa aaaaaaa aaa
aaaa aaaaaaa aaaaaaaaaa aaaaaaa aaa
aaaaaaa aaaaaa aaaaaaaaaa aaaaaaaa aaaaaaaaa aaaaaaa aaaaaaaa aaaaaaa aaaaaaaaaa aaaaaaa aaaaaaa a a aaaaaaa aaaaaaaaa aaaaaa
aaaaaaa aaaaa aaaaa aaaaa
aaaaa aaaaaaa aaaaaaa
aaaaaaaa aaaaaaaaa
aaaaaaaaa aaaaaaaaaa
</div>

CSS:

Cita:

.imagen {width:250; height:250; float: right;}

the_web_saint · #6 (**permalink**) 20/11/2008, 10:30

WAO!!
Como siempre fenomenal Mikel.
Muchas Gracias!!

Saludos y Gracias a todos!