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
>
>
> --
> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to
rubyonrails-ta...@googlegroups.com.
> To view this discussion on the web visit
https://groups.google.com/d/msgid/rubyonrails-talk/5cee16be-a1df-4748-b842-7bfab60c9e5c%40googlegroups.com.