Right Side align without float

Question

I have a chat widget that I am adding some styling to. However I am having difficulty making the \"user\" chat bubbles align to the right of the screen.

When I use floa

Answer 1

if you don't want use floats, just try with inline-block, like so:

#chatWindow {
   text-align: right;
}

.chat-bubble-user {
   display: inline-block;
   text-align: left; 
}

JsBin (tested on Fx20): http://jsbin.com/awimev/2/edit

Answer 2

You can use float:right on the user messages and put a clearfix div after each one:

http://jsbin.com/utulay/2/edit

<div class="chat-bubble-user">
    <div class="chat-bubble-glare-user"></div>
    <p>I have a question about kittens?</p>
    <div class="chat-bubble-arrow-border-user"></div>
    <div class="chat-bubble-arrow-user"></div>
 </div>
<div class="clearfix"></div>

CSS

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
.clearfix {
    display: block;
}

Answer 3

it has been a problem for sometime until. You only have to use

text-align:right;
display-inline:block;

all in the parent member;