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:
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.<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>
Alguien sabe cómo puedo solucionarlo?
Muchas gracias
