Right Side align without float

Right Side align without float

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 float right, with float left(for the other side) the divs no longer position correctly, in that they seem to just go to the right of the relative divs.
I would like it to also be able to append div’s that will cause the overflow-y to create a scroll bar. Which without the float is already working as expected.
Below is the current version in a jsbin.

TLDR; trying to get the .chat-bubble-user divs to align to right of screen without float.


Solution 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

Solution 2:

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

Related:  Using a Glyphicon as an LI bullet point (Bootstrap 3)


<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 class="clearfix"></div>


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

Solution 3:

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


all in the parent member;