CSS "right" attribute not behaving as expected

Question

I'm coding a UI for a chat application. I have a list of messages, which are styled on a different way depending on if the sender is the own user or another user.

The problem is that when I set the right attribute for a message (which has its position attribute set to relative) the element seems to be taking the same reference point as left. And the more pixels I add to the value the farther the element moves to the left, but starting from the left side of the own element.

The actual result is this:

And what I want is the "a" messages to be aligned to the right.

The css code for the speech bubbles is the following:

    .speech {
  display: inline-block;
  position:relative;
  padding:5px;
  margin: 1px 3px;
  border:2px solid #5a8f00;
  color:#333;
  background-color: #df9;
  /* css3 */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  color: #000;
  font-weight: 600;
}
.speech::before {
  content:"";
  position:absolute;
  bottom:-20px; /* value = - border-top-width - border-bottom-width */
  left:40px; /* controls horizontal position */
  border-width:20px 20px 0;
  border-style:solid;
  border-color:#5a8f00 transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}
.speech.otherown::before {
  top:10px; /* controls vertical position */
  bottom:auto;
  left:-27.5px; /* value = - border-left-width - border-right-width */
  border-width:3px 10px 3px 15px;
  border-color:transparent #5a8f00;
}
.speech.userown::before {
  top:10px; /* controls vertical position */
  bottom:auto;
  left: auto;
  right: -24.4px; /* value = - border-left-width - border-right-width */
  border-width:3px 10px 3px 12px;
  border-color:transparent #5a8f00;
}
.speech.userown {
  margin-right: 10px;
  right: 0;
}
.speech.otherown {
  margin-left: 10px;
}

And the HTML is the following:

<section class="conversation">
<div class="messages">
  <ul>
    <li class="speech userown">Message a</li><br>
    <li class="speech otherown">Message b</li><br>
    <li class="speech userown">Message a</li><br>
    <li class="speech userown">Message a</li><br>
    <li class="speech otherown">Message b</li><br>
    <li class="speech userown">Message a</li><br>
  </ul>
 </div>
 <div id="sendmsg" class="sendmsg"></div>
</section>

The whole code is at http://github.com/dieortin/crowdspeak .

Answer 1

When an element with position:relative has right styling, think of it as representing "how many pixels away from this element's original right position it should be". The same goes for left, top, and bottom--the reference point is the original position of the element. So adding pixels to right pushes it left, and adding pixels to left pushes it right.

If you want it to be X pixels from the right side of its container, try using position:absolute instead.

Edit: In this specific case, it might be better to use float instead of absolute positioning. Try adding the following:

.speech {
  clear:both;
}
.speech.userown {
  float:right;
}
.speech.otherown {
  float:left;
}

Answer 2

The position needs to be set to absolute or fixed to obey the right property.