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;
}