imagen va más allá de los límites de contenedores div

Question

Puede alguien echar un vistazo a la siguiente violín: http://jsfiddle.net/R4bCy/1/

pensé que un div debe ajustar su altura con el fin de dar cabida a los elementos que está, a menos que los elementos tengan una posición absoluta.

¿Por qué el div no se expande a la altura máxima de la imagen?

Necesito que la imagen se alinee a la derecha. Las únicas formas en que sé cómo hacerlo son align='right', position:absolute; right: 0; y float:right, todas las cuales hacen que el div que lo contiene no ajuste su altura a la altura de la imagen.

Answer 1

.intro { 
margin: 10px; 
outline: 1px solid #CCC; 
background: #A00; 
color: #FFF; 
height:auto; 
overflow:auto; 
} 
​.img{ 
float:right; 
height:auto; 
}​ 

<div class="intro"> 
    <div class="img"> <img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s1600/tall+copy.jpg" style="margin: 10px 10px; "/></div> 

    <p>Sorry, but the page you requested could not be found.</p> 
</div>​​​​​​​​​​ 

DEMO

Answer 2

Whoops, disculpas, publicado y editado su pregunta - el derecho de alineación es flotante, creo (en su lugar, debe usar flotante: derecho y clearfix de algún tipo).

ejemplo: http://jsfiddle.net/R4bCy/5/

Answer 3

Lo que hay que hacer es añadir después de la etiqueta p,

<div style="clear:both;"></div> 

Answer 4

Esto es lo que te creo quieren: http://jsfiddle.net/R4bCy/6/

Si quieres ed el texto a la izquierda y la imagen flotó hacia la derecha, por favor, esta es tu CSS: http://jsfiddle.net/R4bCy/15/

También puede tener dos div s que tienen un ancho de 50% contenidos en un recipiente div. Esto le permitirá a un poco más de flexibilidad en su colocación de la imagen debido a que el texto y la imagen tienen cada uno sus propias modificables div s con atributos independientes

Answer 5

'¿Por qué el div no se expanda a toda la altura de la imagen ? '

Como los flotantes se superponen con los bloques, solo los contextos de formato de bloque contienen flotantes. (Puede encontrar una buena visión general de todo el tema aquí: http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/)

On para resolver el problema en cuestión:

El align=right realidad se traducirá en la img siendo float: right (el atributo align es obsoleto y css debería ser usado).

para contener la imagen flotaba en su matriz div que necesita, ya sea que el padre div establecer un contexto de formato de bloque (contextos de formato de bloque encierran flotadores anidados) o explícitamente limpiar el flotador con un elemento adicional después de la img con el estilo como una clear: right.

Una solución fácil para crear un contexto de formato de bloque es flotar el padre div así, aunque mi solución preferida en este caso sería establecer simplemente su overflow-hidden (también resulta en un contexto de formato de bloque).

Eche un vistazo al violín actualizado http://jsfiddle.net/R4bCy/8/.