Como hacer que el texto no se acomode debajo de la imagen ?

[MonicaH]

Hola,

ustedes conocen:

Código PHP:

  <img src="cuadro.png" alt="Test" style="float:left;" />

Y ahora como hago para que al finalizar la imagen el 
texto no se me acomode debajo de ella, sino que se
comporte como si fuecen dos celdas de tabla tipo <td></td> 

?  
   

Como puedo lograr eso ?

He utilizado Clear:X y no funciona, que es lo que debo utilizar ?

[fer10]

no entiendo el probelma, pero con float: haces el objeto flotante. y asi no se baja el texto solo que con clear limpias los flotatanes..

[MonicaH]

Esto es lo que sucede con nada + que float:left:

Código PHP:

  ------------   El relato de una historia y bla, bla, bla, ...
-    -   El relato de una historia y bla, bla, bla, ...   
-    -   El relato de una historia y bla, bla, bla, ...   
-    -   El relato de una historia y bla, bla, bla, ...   
-    -   El relato de una historia y bla, bla, bla, ...   
-    -   El relato de una historia y bla, bla, bla, ...   
-    -   El relato de una historia y bla, bla, bla, ...   
------------   El relato de una historia y bla, bla, bla, ...   
El relato de una historia y bla, bla, bla, ...   
El relato de una historia y bla, bla, bla, ...   
El relato de una historia y bla, bla, bla, ...   
El relato de una historia y bla, bla, bla, ...  
   

Esto es lo que necesito:

Código PHP:

  ------------   El relato de una historia y bla, bla, bla, ...
-    -   El relato de una historia y bla, bla, bla, ...   
-    -   El relato de una historia y bla, bla, bla, ...   
-    -   El relato de una historia y bla, bla, bla, ...   
-    -   El relato de una historia y bla, bla, bla, ...   
-    -   El relato de una historia y bla, bla, bla, ...   
-    -   El relato de una historia y bla, bla, bla, ...   
------------   El relato de una historia y bla, bla, bla, ... 
        El relato de una historia y bla, bla, bla, ... 
        El relato de una historia y bla, bla, bla, ... 
        El relato de una historia y bla, bla, bla, ... 
        El relato de una historia y bla, bla, bla, ... 
        El relato de una historia y bla, bla, bla, ...  
   

Como hacerlo que falta agregar ?

[MonicaH]

Bueno, nu se cuadro mucho el "CUADRO", pero espero se entienda + la idea.

Simplemente lograr:
<table><tr>
<td>IMAGEN</td> <td>Historia de Hadas...</td>
</tr></table>

Piensa en esa salida y entenderas.

[AlZuwaga]

Podrías hacer algo así:

Código:

img {float: left;}
p {margin-left: 110px;}

<img src="imagen.jpg" alt="texto alternativo" width="100" height="100" />
<p>Lorem ipsum dolor sit amet....</p>

[fer10]

simpre es bueno otra opcion:
para que te valide con strict

img {float: left;position:absolute;left:-110px}
p {padding-left: 110px;position:relative}

IMG dentro del parrafo

<p>
<img src="imagen.jpg" alt="texto alternativo" width="100" height="100" />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
</p>

[MonicaH]

Pero entonces siempre estara dependiendo del P y no de CSS aplicao a la imagen ?

Por que seran varios parrafos, asi que cada uno debera llevar su class="..."

Por que luego en la misma pagina hay otros Parrafos que no requieren eso...

Luego viene un <hr />

Que termina con esa historia y viene otra historia, y tampoco se conoce las dimensiones de las imagenes que cada USER utiliza para decorar el cuento...

Por ello aplicar medidas al LEFT DEL PARRAFO no es muy saludable...

[MonicaH]

Hola?...

Tonces no es posible ?

Gracias a todos.

[informante]

Segun te entendi , entonces la forma mas simple es dandole a la imagen lel atributo ALIGN=LEFT <IMG .... ALIGN=LEFT SRC="..." >

[fer10]

#parrafos p {padding-left: 110px;position:relative}
#parrafos p img {float: left;position:absolute;left:-110px}

<div id="parrafos">
<p>
<img src="imagen.jpg" alt="texto alternativo" width="100" height="100" />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
</p>

<p>
<img src="imagen.jpg" alt="texto alternativo" width="100" height="100" />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
Lorem ipsum dolor sit amet....<br />
</p>


</div>

asi ?

[MonicaH]

Gracias FER10,

precisamente al indicar una medida, imaginate que X user agregue una imagen que la SUPERE o que sea menor.

No se rata de un AVATAR, sino de un grafico que puede cambiar de size.

Parece que esto tampoco puede hacerse sin TABLE, verdad ?

[MonicaH]

Muchachos aqui dan una solucion, pero utiliza graficos:

http://www.csscreator.com/node/18615#comment-81403

El autor dice que se puede SIN GRAFICOS, pero no dice como.

Me pueden ayudar para hacerlo SIN GRAFICOS?

Gracias.