Chat system align

Question

(see Update at the bottom for a live demo of what I want)

I have an online game with a chat system, but the CSS suck.

Example with images:

And two code example Here I have used absolute with the position of the user, and the speech can be going on others speech.

 .speech-container { position:absolute; top:0; left:0; height:250px; background:rgba(0,0,0,.15); width:100%; } .speech { background:white; border:1px solid brown; padding:10px; border-radius:5px; position:absolute; } 

 <div class="speech-container"> <div class="speech red" style="left:20px;top:10px"> <span><b>User1:</b> Test</span> </div> <div class="speech red" style="left:20px;top:60px"> <span><b>User1:</b> Test</span> </div> <div class="speech blue" style="left:120px;top:10px"> <span><b>User2:</b> Hi</span> </div> <div class="speech blue" style="left:120px;top:60px"> <span><b>User2:</b> Hi</span> </div> <div class="speech blue" style="left:120px;top:110px"> <span><b>User2:</b> Testttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</span> </div> <div class="speech blue" style="left:120px;top:160px"> <span><b>User2:</b> Hi</span> </div> <div class="speech blue" style="left:20px;top:110px"> <span><b>User1:</b> Testtttttttttttttttttttttttttttttttttttt (pronounced after the user2 speech)</span> </div> <div class="speech blue" style="right:20px;top:15px"> <span><b>User3:</b> Test</span> </div> </div> 

And 'what I want' demo Here I have what I want but with absolute, isn't possible to use flex and absolute for a column system?

 .speech-container { position:absolute; top:40px; left:0; height:250px; background:rgba(0,0,0,.15); width:100%; } .speech { background:white; border:1px solid brown; padding:10px; border-radius:5px; position:absolute; } 

 <div class="speech-container"> <div class="speech red" style="left:20px;top:10px"> <span><b>User1:</b> Test</span> </div> <div class="speech red" style="left:20px;top:60px"> <span><b>User1:</b> Test</span> </div> <div class="speech blue" style="left:120px;top:10px"> <span><b>User2:</b> Hi</span> </div> <div class="speech blue" style="left:120px;top:60px"> <span><b>User2:</b> Hi</span> </div> <div class="speech blue" style="left:120px;top:110px"> <span><b>User2:</b> Testttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</span> </div> <div class="speech blue" style="left:120px;top:210px"> <span><b>User2:</b> Hi</span> </div> <div class="speech blue" style="left:20px;top:160px"> <span><b>User1:</b> Testtttttttttttttttttttttttttttttttttttt (pronounced after the user2 speech)</span> </div> <div class="speech blue" style="right:20px;top:15px"> <span><b>User3:</b> Test</span> </div> </div> <b>What I expect, use flex maybe?</b> 

UPDATE: I have finded a game with what I want (Habbo) .

GIF:

How can I fix that?

Answer 1

Try this !

https://jsfiddle.net/xstjqy8r/

 .speech-container { position:absolute; top:40px; left:0; height:250px; background:rgba(0,0,0,.15); width:100%; } .speech { background:white; border:1px solid brown; padding:10px; border-radius:5px; display:block; width:60%; float:left; } .speech.blue { float:right; } .container-left { width:300px; display:block; position:absolute; } .container-right { width:300px; display:block; position:absolute; right:0px; } 

 <div class="speech-container"> <div class="container-left"> <div class="speech red" style="left:20px;top:10px"> <span><b>User1:</b> Test</span> </div> <div class="speech red" style="left:20px;top:60px"> <span><b>User1:</b> Test</span> </div> <div class="speech blue" style="left:120px;top:10px"> <span><b>User2:</b> Hi</span> </div> <div class="speech blue" style="left:120px;top:60px"> <span><b>User2:</b> Hi</span> </div> <div class="speech blue" style="left:120px;top:110px"> <span><b>User2:</b> Testttttt</span> </div> <div class="speech blue" style="left:120px;top:210px"> <span><b>User2:</b> Hi</span> </div> <div class="speech red" style="left:20px;top:160px"> <span><b>User1:</b> Testtttttt</span> </div> </div> <div class="container-right"> <div class="speech blue" style="right:20px;top:15px"> <span><b>User3:</b> Test</span> </div> </div> </div>