Foros del Web » Creando para Internet » CSS »

imagen "se sale" de una capa <div>

Estas en el tema de imagen "se sale" de una capa <div> en el foro de CSS en Foros del Web. Tengo un <div> (con fondo naranja) que dentro lleva una imagen con float:right. La imagen se pone a la derecha del texto pero la imagen, ...
  #1 (permalink)  
Antiguo 17/11/2006, 01:17
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 384
Antigüedad: 12 años, 10 meses
Puntos: 0
imagen "se sale" de una capa <div>

Tengo un <div> (con fondo naranja) que dentro lleva una imagen con float:right. La imagen se pone a la derecha del texto pero la imagen, que es mas alto que el texto, se sale del <div>. Lo que digo lo podeis ver en http://trixxi.inspiroh.com (el post de Borat).

Lo que quiero es que la imagen se quede dentro del <div>, que estire el propio <div> para que no se vea ese efecto de que se salga del <div>.
He probado de poner en el <div> un overflow pero nada, en img he probado de poner display: block pero tampoco hace caso. No se me ocurre como solucionarlo gracias.
__________________
m!ketrix
CINE25 - Red Social de Cine
byinspiroh
  #2 (permalink)  
Antiguo 17/11/2006, 02:05
Avatar de BonRouge  
Fecha de Ingreso: noviembre-2006
Mensajes: 51
Antigüedad: 11 años, 1 mes
Puntos: 0
Podrías hacer algo así, pero será un problema con tu imagen 'TRIXXI':
Código:
.cuerpo {
float:left;
margin-bottom:10px;
}
.cuerpo:after {
content:"";
display:block;
clear:right;
} 
#requerimientos {
clear:both;
display:block;
}

Última edición por BonRouge; 17/11/2006 a las 17:46
  #3 (permalink)  
Antiguo 17/11/2006, 07:46
Avatar de PC's Troll  
Fecha de Ingreso: junio-2005
Ubicación: Caracas-Venezuela
Mensajes: 55
Antigüedad: 12 años, 6 meses
Puntos: 0
Hey! yo tenía este problema y lo solucioné utilizando este código en mi CSS.

Código:
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Lo que vas a hacer es poner a ese div a que pertenezca a la clase clearfix

Código:
<div class="clearfix"></div>
Las encontrarás bien explicadas en el tutorial que si bien está en inglés, no dudo en que si no conoces el idioma, con un traductor podrás entender sin ningún problema. De verdad disculpa si este inconveniente del idioma no es bien visto, pero así fue que yo conseguí solucionar ése problema cuando en su momento lo tuve.

h t t p :/ / w w w.positioniseverything.net/easyclearing.html

y leyendo hace unos días, encontré estos para aquellos que les gusta usar el IE

h t t p :// w w w.torresburriel.com/weblog/2006/10/19/ojo-con-el-uso-de-clearfix-casca-en-ie7/

------En el caso de ese enlace, para IE7 lo que haces es eliminar el .clearfix {height: 1%;} y para IE6 lo dejas como te lo puse.


Sólo espero que al igual que a mí, el uso de ésta clase te ayude a solventar el problema. Un saludo.



PC Troll
  #4 (permalink)  
Antiguo 17/11/2006, 17:44
Avatar de -Defero-
Colaborador
 
Fecha de Ingreso: julio-2004
Ubicación: Guipúzcoa
Mensajes: 4.777
Antigüedad: 13 años, 5 meses
Puntos: 76
Yo utilizo un truco más chapucero... meto esto al final del DIV:

<p style="clear: both;">&nbsp;</p>

Un espacio en blanco que no se ve, pero sirve para que el DIV sea siempre más grande que la imagen.
__________________
abogado en Errenteria + procuradora en San Sebastián = equipo imparable
  #5 (permalink)  
Antiguo 18/11/2006, 13:33
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
no entiendo esas "soluciones" raras que ponen ahi, la manera correcta para que un contenedor se estire hasta contener un float es ponerle overflow distinto de 'visible'. en IE esto no pasa porque el contenedor siempre se estira.
__________________
Internet Explorer SuckS
Download FireFox
  #6 (permalink)  
Antiguo 20/11/2006, 08:38
 
Fecha de Ingreso: enero-2005
Ubicación: Barcelona
Mensajes: 384
Antigüedad: 12 años, 10 meses
Puntos: 0
Jejej, gracias caraj0dida. Tu apunte me sirve a la perfección. Las otras sugerencias me parecieron tambien algo "rebuscadas" por lo que no las probé, pero gracias igualmente!

Al final lo que hice fue incluir un "overflow: auto" al <div> del post para que todo su contenido sea envuelto.
__________________
m!ketrix
CINE25 - Red Social de Cine
byinspiroh
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 01:26.