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

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

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

    

    
I have a question about kittens?
    

    

 

CSS

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