How to align divs in a DOM

Question

I'm trying to align the divs of the messages but I don't know how.

My intention is about the div's take a style like the next imagen

in my query I select the user nickname of the emitter and the receiver and in the foreach I take it like this

$chat = '';
foreach ($rs as $message) {
print_r($message);

    $chat .= '<div class="single-message'.(($_SESSION["nickname"]==$message->UserEmitter, $usuarioReceptor == $message->UserReceiver)?'right':'left').'">
                <strong>'.$message->UserEmitter.': </strong><br /> <p>'.$message->message.'</p>
                <span>'.date('h:i a', strtotime($message->created_at)).'</span>
              </div>
              <div class="clear"></div>';

}

echo $chat;

but if I do it like that show me an error in the line of

(($_SESSION["nickname"]==$message->UserEmitter, $usuarioReceptor == $message->UserReceiver)?'right':'left').'">

is my first time make something with JS i hope someone can help me

Resutl of the Answer

to make me understand I'm trying to make that cesg dav take a position into the left because is the receiver and cesg av2 take a position at the right because is the Emitter

the source code that I'm using is in OneDrive

New Foreach

foreach ($rs as $message) {

    $chat .= '<div class="single-message'.(($usuarioActual==$message)?'right':(($usuarioReceptor==$message->message)?'left':'')).'">
                <strong>'.$message->UserEmitter.': </strong><br /> <p>'.$message->message.'</p>
                <span>'.date('h:i a', strtotime($message->created_at)).'</span>
              </div>
              <div class="clear"></div>';

}

Answer 1

Using flexbox is easy to manipulate elements on screen :) I think it resolves your problem with alignment and with php code at the end of html file for you test on your real code!

 .chat { height: 200px; width: 300px; padding: 15px; border: 1px solid black; } .message-container { display: flex; flex-wrap: wrap; flex-direction: column; } .message { flex-grow: 0; padding: 5px; border: 1px solid black; } .message-container.is-emitter { align-items: flex-start; } .message-container.is-receiver { align-items: flex-end; } 

 <div class="chat"> <div class="message-container is-emitter"> <div class="message">EMITTER</div> </div> <div class="message-container is-receiver"> <div class="message">RECEIVER</div> </div> </div> <!-- PHP CODE MODIFIED $chat = '<div class="chat">'; foreach ($rs as $message) { $userType = (($_SESSION["nickname"] == $message->UserEmitter && $usuarioReceptor == $message->UserReceiver) ? 'is-emitter' : 'is-receiver' $chat .= '<div class="message-container ' . $userType . '"> <div class="message"> <strong>'.$message->UserEmitter.': </strong> <br /> <p>'.$message->message.'</p> <span>'.date('h:i a', strtotime($message->created_at)).'</span> </div> </div>'; } $chat .= '</div>'; echo $chat; -->