Texto flotando en el bloque al lado de la imagen

Question

Me gustaría lograr la siguiente ubicación:

Dos textos diferentes (en bloque) flotantes/en línea al lado de la imagen. (Todo dentro de div).

He estado intentando con diferentes configuraciones de pantalla (bloque + en línea para texto, etc.) pero todavía no está funcionando.

HTML:

<div class="res"> 
<img src="<?php echo 'img/'.$row["sType"].'.png';?>"/> 
<span>TITLEe</span> 
<span>Description</span> 
</div> 

CSS:

.res { 

    height:60px; 
    background-color:yellow; 
    border-bottom:1px solid black; 
    text-align:left; 

} 

.res img { 

    margin-top:8.5px; 
    margin-left:5px; 
    display:inline 
} 

.res span { 

    display:block; 
} 

Answer 1

HTML:

<div class="content"> 
    <img src="http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png"/ alt="" > 
    <h3>Title</h3> 
    <p>Some Description</p> 
</div>​ 

CSS:

.content { 
    width: 400px; 
    border: 4px solid red; 
    padding: 20px; 
    overflow: hidden; 
} 

.content img { 
    margin-right: 15px; 
    float: left; 
} 

Answer 2

probar esto ..... debería funcionar

html:

<div id="testDiv"> 
    <div class="imgContainer"><img src="path/image.jpg" /></div> 
    <div class="textContainer"></div> 
</div> 

css:

#testDiv { float:left; width: 360px; } 
#testDiv .imgContainer { float:left; width:120px; height:90px; } 
#testDiv .textContainer { float:left; width:240px; height:90px; overflow:hidden } 

Answer 3

Creo que se necesita lo siguiente:

HTML:

<div class="wrap"> 
    <img src="img.jpg" class='left;' /> 
    <h1 class='right'>TITLE</h1> 
    <div class='right'>Element description</div> 
</div> 

CSS:

.wrap { width: 600px; /* Just a sample value */ } 
.left { width: 200px; float: left; } 
.right { margin-left: 220px; width: 380px;} 

Eso debería hacer el truco. Ajuste los parámetros de ancho y margen a sus necesidades.

Answer 4

bien se puede tratar de la manera clásica usando tablas aunque no se recomienda el uso de tablas para maquetar

<table> 
    <tr> 
    <th><img src="yourimage" /> </th> 
    <th >adsasd<br/>adas</th> 
    </tr> 
</table> 

Answer 5

Hola por qué solía fl avena izquierda es posible hacer esto sin utilizada float como como esto

<div class="res"> 
<img src="<?php echo 'img/'.$row["sType"].'.png';?>"/> 
<div class="text"><h5>TITLEe</h5> 
    <p>Description</p></div> 
</div> 

Css

.res { 
    height:60px; 
    background-color:yellow; 
    border-bottom:1px solid black; 
} 
img, .text{ 
vertical-align:top; 
} 
.text{ 
display:inline-block; 
} 
p, h5{ 
margin:0; 
    padding:0; 
} 

Live demo

y cambiar a CSS, clase según su diseño