How to align div with inline display block?

Question

I want the first div to be aligned to the right, if I use float right, it will cause the second div to be on the same line that I don't want, my goal is to make the first div to the right without loss as in chat applications. Any help would be appreciated. THANKS

Note. I use the built-in display block just because I want divs to match the content.

.outer{ display: block; } .lbubble , .rbubble { position: relative; padding: 5px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 2px 2px 10px 0px #616161; box-shadow: 2px 2px 7px 0px #616161; display: inline-block; margin-bottom: 8px; } .lbubble{ background: lightblue; } .rbubble{ background: lightgreen; } .lbubble:after { content: ""; position: absolute; top: 5px; left: -8px; border-style: solid; border-width: 10px 14px 10px 0; border-color: transparent lightblue; width: 0; z-index: 1; } .rbubble:after { content: ""; position: absolute; top: 5px; right: -8px; border-style: solid; border-width: 10px 0 10px 14px; border-color: transparent lightgreen; width: 0; z-index: 1; } 

 <div class='outer'> <div class="rbubble"> Right Bubble with align right</div> </div> <div class='outer'> <div class="lbubble"> Left Bubble it should be on 2nd line with align left </div> </div> 

Answer 1

One solution is to use float: right and clear: right as:

 .outer { display: block; clear: right;/*clear float right*/ } .lbubble, .rbubble { position: relative; padding: 5px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 2px 2px 10px 0px #616161; box-shadow: 2px 2px 7px 0px #616161; display: inline-block; margin-bottom: 8px; } .lbubble { background: lightblue; } .rbubble { background: lightgreen; float: right;/*add float right*/ } .lbubble:after { content: ""; position: absolute; top: 5px; left: -8px; border-style: solid; border-width: 10px 14px 10px 0; border-color: transparent lightblue; width: 0; z-index: 1; } .rbubble:after { content: ""; position: absolute; top: 5px; right: -8px; border-style: solid; border-width: 10px 0 10px 14px; border-color: transparent lightgreen; width: 0; z-index: 1; } 

 <div class='outer'> <div class="rbubble">Right Bubble with align right</div> </div> <div class='outer'> <div class="lbubble">Left Bubble it should be on 2nd line with align left</div> </div> 

Using clear: right brings the left bubble element to the desire position.

Answer 2

You can put them in two containers and then apply float: left and float: right .

 .outer{ display: block; } .lbubble , .rbubble { position: relative; padding: 5px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 2px 2px 10px 0px #616161; box-shadow: 2px 2px 7px 0px #616161; display: inline-block; margin-bottom: 8px; } .container { width: 100%; height: 30px; } .lbubble{ background: lightblue; float: left; } .rbubble{ background: lightgreen; float: right; } .lbubble:after { content: ""; position: absolute; top: 5px; left: -8px; border-style: solid; border-width: 10px 14px 10px 0; border-color: transparent lightblue; width: 0; z-index: 1; } .rbubble:after { content: ""; position: absolute; top: 5px; right: -8px; border-style: solid; border-width: 10px 0 10px 14px; border-color: transparent lightgreen; width: 0; z-index: 1; } 

 <div class="container"> <div class='outer'> <div class="rbubble"> Right Bubble with align right</div> </div> </div> <div class="container"> <div class='outer'> <div class="lbubble"> Left Bubble it should be on 2nd line with align left </div> </div> </div> 

Answer 3

An essential part of this is the following CSS:

 .rbubble{ background: lightgreen; margin-left: 100%; transform: translateX(-100%); word-wrap: avoid-break; } 

We push it all out of the container to the right, and then drag it to the left using transform: translateX(-100%); . No clutter float and no extra wrappers required.

 .outer{ display: block; } .lbubble , .rbubble { position: relative; padding: 5px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 2px 2px 10px 0px #616161; box-shadow: 2px 2px 7px 0px #616161; display: inline-block; margin-bottom: 8px; } .lbubble{ background: lightblue; } .rbubble{ background: lightgreen; margin-left: 100%; transform: translateX(-100%); word-wrap: avoid-break; } .lbubble:after { content: ""; position: absolute; top: 5px; left: -8px; border-style: solid; border-width: 10px 14px 10px 0; border-color: transparent lightblue; width: 0; z-index: 1; } .rbubble:after { content: ""; position: absolute; top: 5px; right: -8px; border-style: solid; border-width: 10px 0 10px 14px; border-color: transparent lightgreen; width: 0; z-index: 1; } 

 <div class='outer'> <div class="rbubble"> Right Bubble with align right</div> </div> <div class='outer'> <div class="lbubble"> Left Bubble it should be on 2nd line with align left </div> </div>