Texto alineado al lado de la foto en CSS

Question

Me pregunto si hay alguna forma de alinear el texto a la derecha de una foto y mantener el texto en esa misma "caja" incluso después de que la imagen termine con HTML y CSS. Un "diagrama" rápido de lo que estoy tratando de lograr es el siguiente:

------- -------- 
------- -------- 
-Image- - Text - 
------- -------- 
------- -------- 
     -------- 
     -------- 

¡Gracias por la ayuda!

Answer 1

Si establece un ancho en el texto div y flota tanto la Imagen como el Texto a la izquierda (float: left), eso debería ser el truco. Despeja los flotadores después de ambos.

<div style="float:left; width:200px"> 
    <img/> 
</div> 

<div style="float:left; width:200px"> 
    Text text text 
</div> 

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

Answer 2

Coloque el texto en un tipo de contenedor y flote ese contenedor junto a la imagen flotante. El siguiente ejemplo de código que debe dar la idea:

<img src="..." style="float:left; width: 200px;" /> 

<div style="float:left; width: 400px;"> 
    <p>Bla bla...</p> 
    <p>Bla bla...</p> 
    <p>Bla bla...</p> 
</div> 

Si necesita algún recipiente alrededor de esos dos elementos para adaptarse automáticamente a su altura el más alto de los dos elementos flotantes, se puede establecer un overflow: hidden en ese contenedor. Para que funcione también en IE6, deberá revertirlo al overflow: auto y agregar algo extraño como height: 1px.

Answer 3

Normalmente creará un elemento div o p para el texto y le dará a la imagen y al texto un float: left. La implementación exacta depende de otros parámetros como el ancho fijo, cómo se ve el diseño, etc.

Answer 4

DEMO:http://jsbin.com/iyeja/5

<div id="diagram"> 
      <div class="separator"></div> 
      <div class="separator"></div> 

      <div id="text_image_box"> 
       <span class="image"><img src="http://l.yimg.com/g/images/home_photo_megansoh.jpg" alt="" /></span><span class="text"><p>some text</p></span> 
       <div class="clear"></div> 
      </div> 

      <div class="separator"></div> 
      <div class="separator"></div> 
      <div class="separator"></div> 
      </div> 

    <style> 
     /* JUST SOME FANCY STYLE*/ 
     #diagram { 
     width:300px; 
     border:1px solid #000; 
     padding:10px; 
     margin:20px; 
     } 

     .separator { 
     height:2px; 
     width:300px; 
     border-bottom:1px dashed #333; 
     display:block; 
     margin:10px 0; 
     } 

     /* MAIN PART */ 
     #text_image_box { 
     width:300px; 
     margin:0 auto; 
     padding:0 
     } 

     .image { 
     float:left; 
     width:180px; 
     height:300px; 
     overflow:hidden; 
     margin:0 auto; 
     } 
     .text { 
    float:right; 
    width:100px; 
    padding:0; 
    margin:0 auto; 
    } 
    .text p { 
    margin:0; 
    padding: 0 5px; 
    } 
     .clear { 
     clear:both 
     } 
     </style>