Hi everyone.
Hope someone can help. I am creating a simple message system where users can message each other. I read the php code into two divs. The first div is the message being received; therefore from another member on the site. The second div is the reply, so the logged in users message. Each div has a message wrapper with a message container div which itself contains a p tag and a span tag and an image container for the profile image. The profile image location is different in each div. The receiver div has the image container on the left with the message container to its right. The sender container has the message container on the left and the image container on the right.
My Issue is with the sender container. I want to position the image container over to the far right of the message wrapper div with the message container div just to the left of the image container. I have tried floating the image container to the right and then set the display property to inline-block on the message container div with the message wrapper overflow set to hidden. This does cause the image to go to the right but theirs a big gap between the image container and the message container as the message container is still over on the far left of the message wrapper div.
I have attached some files to give a clearer understanding of the issue. I want to be able to adjust the viewport and the divs adjust accordingly
Hope someone can help.
All the best David