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 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.

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

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

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