How Can I Fix This Alignment With Css When Using Bootstrap?

I'm using bootstrap Somehow it come appears messed up. It seems twitter-bootstrap is preventing. How can I fix this? Please check my demo. DEMO http://jsfiddle.net/5r6UM/4/ HTML

Solution 1:

You're trying to float an element next to a full-width element (.bubble). Here's one way that should work: http://jsfiddle.net/5r6UM/9/

Main differences:

.bubble_row {
  position: relative;
}

.me_icon {
    position: absolute;
    left: 0;
    top: 0;
    margin: 5px10px5px5px;
    text-align: left;    
}

.you_icon {
    position: absolute;
    right: 0;
    top: 0;
    margin: 5px10px5px5px;
    text-align: right;          
}

Solution 2:

Take out the margin on .me_icon and .you_icon

.me_icon {
    float: left;
    /*margin: 5px 10px 5px 5px;*/text-align: left;
}

Specifically the top and bottom margins.

The "you icon"s are showing below the message they belong to. This is because when you right float something and want other elements to be on the same line, the floating element must come before the others in the markup. Simply swap their orders:

<divclass="bubble_row"><divclass="you_icon"><pclass="responsive-img"><ahref="/user/1"><imgalt="X50"class="img-polaroid"src="http://www.miraiha.net/wpblog/wp-content/uploads/2010/10/designreviver-free-twitter-social-icon.jpg"style="width: 50px; height: 50px" /></a></p></div><divclass="bubble you"><spanclass='text-error'>02:12:53</span>：<ahref="/user/1">Person A</a><br />
    Hi
  </div></div>