create chat view

I’m trying to create a chat view where if the sender of the message is the current user then the message is displayed on the right side and if the sender is the other user then the message is displayed on the left So far what I have doesn’t right or left float the messages, they all appear in the same column

chat.html.erb:

Conversation with <%= @conversation_with.name %>
<% @messages.each do |m| %> <% if m.sender=@conversation_with %>
<%= m.content %>
<% else %>
<%= m.content %>
<% end %> <% end %>

application.scss:

.left-float
{
float: left;
}

.right-float
{
float: right;
}

I'm trying to create a chat view where if the sender of the message is the current user then the message is displayed on the right side and if the sender is the other user then the message is displayed on the left So far what I have doesn't right or left float the messages, they all appear in the same column

chat.html.erb:

<div>
<h3>Conversation with <%= @conversation_with.name %>

<div id="message_holder">
    <% @messages.each do |m| %>
        <% if m.sender=@conversation_with %>
            <div><span class="left-float"><%= m.content %></span><br></div>
        <% else %>
            <div><span class="right-float"><%= m.content %></span><br></div>
        <% end %>
    <% end %>
</div>

application.scss:
    
.left-float
{
float: left;
}

.right-float
{
float: right;
}

A span element is an "inline" element, like an individual character of text. It has no structure to it at all, unless you give it some by adding display: inline-block or display: block to it. If you change those spans to divs, you may see a different visual outcome, because divs are naturally display: block unless you direct otherwise.

Also, by itself, float left and float right won't give you any visual feedback unless the floated element is narrower than its parent element. A 100% wide element floated left doesn't look any different than a 100% wide element floated right. If I wanted to make a set of chat bubbles, I might start with this:

span.chat {
  display: block;
  width: 80%;
  padding: .3em .9em;
  border-radius: 1em;
  background-color: #ccc;
  float: left;
}

span.chat.originator {
  float: right;
  background-color: #cad5ff;
  text-align: right;
}

And then amend the ERB to set the base class as well as add the override class when the message is by the person who started the chat. The result should be emitted like this:

<span class="chat originator">foo bar baz</span>
<span class="chat">boo blarg blech</span>

You could make this less specific, css-wise, by adding a "chat" class to the parent div, and then changing the selectors like this:

.chat span {
  /* same as first rule above */
}

.chat > .originator {
  /* same as the second rule above */
}

<div class="chat">
  <span class="originator">foo bar baz</span>
  <span>boo blarg blech</span>
</div>

Fool around with these ideas in a regular HTML file, previewed in a browser. Don't involve Rails in it at all. The problem is most likely in your HTML or CSS.

Walter