Hola a todos, tengo un problemilla a la hora de mostrar unos textos dinámicos en HTML.
Cada vez que escribo un texto en mi pa´gina debe mostrarse en un div con el estilo de whattsapp, el problema está en los mensajes que se ajustan a la derecha, ya que si les pongo el atributo "float:right", cuando escribo un mensaje pegado a la izquierda, éste último se coloca por encima del anterior, e vez de por debajo.
Les dejo un trozo de código para que lo vean:
Código:
<div>
<table style="width:80%;">
<tbody>
<tr>
<td style="width:40px;">
<img style="width:30px; margin-left:10px; margin-right:0px; margin-top:10px;" src="https://localhost/images/SilhouetteImage.png">
</td>
<td style="width:8px;">
<img style="margin-left:4px; margin-right:-4px; margin-top:10px;" src="../images/blue_arrow.png">
</td>
<td style="background-color:#eef3fd; padding-top:5px; margin-top:5px; padding-bottom:5px; border-radius:5px; border:1px solid #cccccc; color:868277; margin-left:10px; padding-left:5px; font-family:Arial;text-align:left; font-size:10px; padding-right:5px;">
<label style="font-size:10pt; font-family:Arial;">En que puedo ayudarle?</label>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table style="width:80%;float:right;">
<tbody>
<tr>
<td style="background-color:#f2fddd; padding-top:5px; margin-top:5px; padding-bottom:5px; border-radius:5px; border:1px solid #cccccc; color:868277; margin-left:10px; padding-left:5px; font-family:Arial; font-size:10px; text-align:right;padding-right:5px;">
<label style="font-size:10pt; font-family:Arial;">Hola buenos días</label>
</td>
<td style="width:8px;">
<img style="margin-left:-4px; margin-right:10px; margin-top:10px;" src="../images/green_arrow.png">
</td>
</tr>
</tbody>
</table>
</div>
Me interesa mantener el tamaño en porcentage debido a que si se modifica el tamaño de la ventana, los mensajes se redimensionan y recolocan automáticamente.
Alguien sabe cómo puedo solucionarlo?
Muchas gracias