CSS - Div no permanecerá en el lado derecho de Other Div

Question

Bastante simple configuración aquí, estoy tratando de obtener dos divs para sentarse lado a lado. Imagen a la izquierda, texto a la derecha. Por alguna razón, si el texto es demasiado largo, empuja el div hacia abajo. Me gustaría hacer sólo el div cs-resumen entender que debe envolver el texto con el fin de no salta hacia abajo como es:

http://jsfiddle.net/csaltyj/5Huau/

Código:

<div class="container"> 
    <div class="cs-image"> 
     <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" /> 
    </div> 
    <div class="cs-summary"> 
     <p>Texty text text McTexterson likes to text. Why is div getting shoved down?</p> 
    </div> 
</div> 
<div class="container"> 
    <div class="cs-image"> 
     <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" /> 
    </div> 
    <div class="cs-summary"> 
     <p>Super short text behaves.</p> 
    </div> 
</div> 

CSS:

.container { 
    overflow: hidden; 
    border: 2px solid #0f0; 
    width: 400px; 
    margin-bottom: 1em; 
} 

.cs-image { 
    float: left; 
    border: 2px solid red; 
} 

.cs-summary { 
    font-size: 0.8em; 
    border: 2px solid blue; 
    float: left; 
    margin-left: 1em; 
} 

Como se puede ver en el segundo recipiente por debajo, el texto corto funciona bien. No quiero codificar ningún valor de pixel o em para qué tan ancho sea el texto, solo quiero que se ajuste y "conozca" sus límites.

Gracias de antemano.

Answer 1

Si su div.cs-summary no tiene un conjunto width que ocupará todo el espacio que se puede

http://jsfiddle.net/hunter/5Huau/7/

.cs-summary { 
    width: 180px; 
    ... 
} 

---

o se puede quitar el div interior envolver elementos y simplemente haz esto:

http://jsfiddle.net/hunter/5Huau/11/

HTML

<div class="container"> 
    <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" /> 
    <p>Texty text text McTexterson likes to text. Why is div getting shoved down?</p>   
</div> 
<div class="container"> 
    <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" /> 
    <p>Super short text behaves.</p> 
</div> 

CSS

.container { 
    overflow: hidden; 
    border: 2px solid #0f0; 
    width: 400px; 
    margin-bottom: 1em; 
} 

.container img { 
    float: left; 
    border: 2px solid red; 
} 

.container p { 
    font-size: 0.8em; 
    border: 2px solid blue; 
    margin-left: 1em; 
} 

Answer 2

Retire la float:left de .cs-summary ...

Y probablemente utilice un algo margin-right: 5px o en el .cs-image para conseguir un espacio entre ellos.

Answer 3

¿Ha considerado not using floats at all, o tiene que admitir versiones de IE antes de 8?

.container { 
    border: 2px solid #0f0; 
    width: 400px; 
    padding-bottom: 1em; 
} 

.container > div { 
    display: table-cell; 
    vertical-align: bottom; 
} 
.cs-image { 
    border: 2px solid red; 
} 

.cs-summary { 
    font-size: 0.8em; 
    border: 2px solid blue; 
    padding-left: 1em; 
} 

Answer 4

Cuando flotaba izquierda o hacia la derecha (como su ejemplo muestra), etiquetas DIV se auto expandirse para el contenido dentro de ellos. Puede hacer dos cosas para resolver su problema:

1. Definir una anchura del div que contiene el texto
2. En lugar de envolver su texto con una etiqueta div y una etiqueta de párrafo (<div><p>text here</p></div>), retire la DIV de alrededor de la etiqueta de párrafo y agregue un float:left a la etiqueta de párrafo. Por ejemplo: <p style="float:left;">text here</p>"

Answer 5

como han señalado el cazador y el usuario 671670, debe usar un ancho.Ambos elementos deben caber en el contenedor para mostrarse uno al lado del otro. Se podría cambiar el código HTML y colocar la imagen dentro del texto y flotar a la izquierda, como esto:

<p>Texty text text McTexterson likes to text. 
    Why is div getting shoved down?<img style="float:left" ... /></p> 

Answer 6

aquí es su código

<!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" xml:lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
    <title></title> 
    <style type="text/css"> 
    .container { 
    overflow: hidden; 
    border: 2px solid #0f0; 
    width: 10px; 
    margin-bottom: 1em; 
    width: 400px; 
} 

.cs-image { 
    float: left; 
    border: 2px solid red; 
} 

.cs-summary { 
    font-size: 0.8em; 
    border: 2px solid blue; 
    margin-left: 1em; 
} 
    </style> 
</head> 
<body> 

    <div class="container"> 
    <div class="cs-image"> 
     <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" /> 
    </div> 
    <div class="cs-summary"> 
     <p>Texty text text McTexterson likes to text. Why is div getting shoved down?</p> 
    </div> 
</div> 
<div class="container"> 
    <div class="cs-image"> 
     <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" /> 
    </div> 
    <div class="cs-summary"> 
     <p>Super short text behaves.</p> 
    </div> 
</div> 
</body> 
</html> 

Basta con retirar flotador derecha desde cs-resumen.