Foros del Web » Creando para Internet » CSS »

Flotar imagen a la derecha de texto

Estas en el tema de Flotar imagen a la derecha de texto en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/11/2008, 08:20
Avatar de the_web_saint  
Fecha de Ingreso: mayo-2008
Ubicación: localhost/tierra/america/panama
Mensajes: 1.229
Antigüedad: 9 años, 7 meses
Puntos: 43
Flotar imagen a la derecha de texto

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
__________________
..::The Saint::..
El pesimista se queja del viento; el optimista espera que cambie; el realista ajusta las velas.
  #2 (permalink)  
Antiguo 20/11/2008, 08:37
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Flotar imagen a la derecha de texto

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 20/11/2008, 09:17
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Flotar imagen a la derecha de texto

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
  #4 (permalink)  
Antiguo 20/11/2008, 09:19
Avatar de the_web_saint  
Fecha de Ingreso: mayo-2008
Ubicación: localhost/tierra/america/panama
Mensajes: 1.229
Antigüedad: 9 años, 7 meses
Puntos: 43
Respuesta: Flotar imagen a la derecha de texto

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.
__________________
..::The Saint::..
El pesimista se queja del viento; el optimista espera que cambie; el realista ajusta las velas.
  #5 (permalink)  
Antiguo 20/11/2008, 09:30
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Flotar imagen a la derecha de texto

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;}
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 20/11/2008, 10:30
Avatar de the_web_saint  
Fecha de Ingreso: mayo-2008
Ubicación: localhost/tierra/america/panama
Mensajes: 1.229
Antigüedad: 9 años, 7 meses
Puntos: 43
Respuesta: Flotar imagen a la derecha de texto

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

Saludos y Gracias a todos!
__________________
..::The Saint::..
El pesimista se queja del viento; el optimista espera que cambie; el realista ajusta las velas.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:00.