imagen "se sale" de una capa <div>

[miketrix_esp]

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.

[BonRouge]

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;
}

[PC's Troll]

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

[-Defero-]

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.

[SiR.CARAJ0DIDA]

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.

[miketrix_esp]

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.