How can I fix this alignment with CSS when using bootstrap?

Question

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

<span id="chat">






    <span id="comment_652">
        <div class="bubble_row">
            <div class="me_icon">
                <p class="responsive-img">  
        <a href="/user/2"><img alt="Dsc_0023" class="img-polaroid" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTHwJFqUSlCJvXdCKEQ9dPxPhx_FYOcbQqD_Hco7vTSwEK_eVpnD-qTWcBCmg" style="width: 50px; height: 50px" /></a>
</p>
            </div>
            <div class="bubble me">

            <span class='text-error'>02:15:02</span>：<a href="/user/2">Person B</a><br />
            What
            </div>
        </div>
    </span>




    <span id="comment_651">
        <div class="bubble_row">
            <div class="me_icon">
                <p class="responsive-img">  
        <a href="/user/2"><img alt="Dsc_0023" class="img-polaroid" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTHwJFqUSlCJvXdCKEQ9dPxPhx_FYOcbQqD_Hco7vTSwEK_eVpnD-qTWcBCmg" style="width: 50px; height: 50px" /></a>
</p>
            </div>
            <div class="bubble me">

            <span class='text-error'>02:14:51</span>：<a href="/user/2">Person B</a><br />
            Hi there
            </div>
        </div>
    </span>




    <span id="comment_650">
        <div class="bubble_row">
            <div class="bubble you"><span class='text-error'>02:12:53</span>：<a href="/user/1">Person A</a><br />
            Hi

            </div>
            <div class="you_icon">
                <p class="responsive-img">  
        <a href="/user/1"><img alt="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>
        </div>
    </span>




    <span id="comment_649">
        <div class="bubble_row">
            <div class="me_icon">
                <p class="responsive-img">  
        <a href="/user/2"><img alt="Dsc_0023" class="img-polaroid" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTHwJFqUSlCJvXdCKEQ9dPxPhx_FYOcbQqD_Hco7vTSwEK_eVpnD-qTWcBCmg" style="width: 50px; height: 50px" /></a>
</p>
            </div>
            <div class="bubble me">

            <span class='text-error'>02:11:46</span>：<a href="/user/2">Person B</a><br />
            Wow
            </div>
        </div>
    </span>




    <span id="comment_645">
        <div class="bubble_row">
            <div class="bubble you">18:03:02：<a href="/user/1">Person A</a><br />
            Hello

            </div>
            <div class="you_icon">
                <p class="responsive-img">  
        <a href="/user/1"><img alt="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>
        </div>
    </span>




    <span id="comment_644">
        <div class="bubble_row">
            <div class="bubble you">17:54:43：<a href="/user/1">Person A</a><br />
            Howdy

            </div>
            <div class="you_icon">
                <p class="responsive-img">  
        <a href="/user/1"><img alt="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>
        </div>
    </span>




    <span id="comment_643">
        <div class="bubble_row">
            <div class="bubble you">17:54:00：<a href="/user/1">Person A</a><br />
            Yahoo

            </div>
            <div class="you_icon">
                <p class="responsive-img">  
        <a href="/user/1"><img alt="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>
        </div>
    </span>




    <span id="comment_642">
        <div class="bubble_row">
            <div class="bubble you">21:15:25：<a href="/user/1">Person A</a><br />
            OK

            </div>
            <div class="you_icon">
                <p class="responsive-img">  
        <a href="/user/1"><img alt="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>
        </div>
    </span>




    <span id="comment_641">
        <div class="bubble_row">
            <div class="bubble you">20:47:34：<a href="/user/1">Person A</a><br />
            Hi

            </div>
            <div class="you_icon">
                <p class="responsive-img">  
        <a href="/user/1"><img alt="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>
        </div>
    </span>











</span>

Answer 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: 5px 10px 5px 5px;
    text-align: left;    
}

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

Answer 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:

<div class="bubble_row">
  <div class="you_icon">
    <p class="responsive-img">  
      <a href="/user/1"><img alt="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>
  <div class="bubble you"><span class='text-error'>02:12:53</span>：<a href="/user/1">Person A</a><br />
    Hi
  </div>
</div>