Css Trick - How to align this div

Question

I have the following alignment:

<div class="main">
    <div class="header"></div>
    <div class="right-bar">
        <div class="chat-user-content"> 
          <span class="chat-user-photo">
            <img src="http://d13yacurqjgara.cloudfront.net/users/25963/avatars/mini/2013-avatar_(1).png" />
          </span>
            <span class="chat-user-name">Fulano Silva</span>
            <span class="chat-user-status"><img src="http://www.colorhexa.com/a7ba3d.png" /></span>
        </div>
    </div>
</div>

.chat-user-status > img{
    border-radius: 50%;
    height:15px;
    width:15px;
}

But I can not align the <SPAN> "user-chat-status" right without using an image. I would like the image that appears in green, were a <DIV> or <SPAN>. What am I doing wrong?

JSFiddle

Answer 1

Check this fiddle out: http://jsfiddle.net/3PduX/18/

I put display:block to the span, which i think may have been what you missed.

---

Radu Chelariu's idea was even better though. I smashed a working example together without having to use the extra span, check it out here: http://jsfiddle.net/3PduX/22/

It uses the :after pseudo element.

Answer 2

If you are using two divisions one after other, you can use clear:both; in current div. If you want to align the div to right,you can use . I hope it will work.

Answer 3

Pish, posh. Images for UI are silly. That's why we have pseudo-elements!

Basically, you just have to replace your image with a :after or :before and style that accordingly. Here's a JSFiddle to illustrate:

http://jsfiddle.net/sickdesigner/N99j3/

Cheers!