IE7 Div width bug in Kudo section

I ran into a very strange bug with IE7. Here is my HTML structure

<div id="tt_message_kudos_top">
<div id="tt_kudo_position">
    <span> Kudos </span>
</div>
<div id="TT_kudos_reply">
    <div class="lia-message-actions lia-component-actions">

        <div class="lia-button-group">

            <span class="lia-button-wrapper lia-button-wrapper-secondary"><a href="/t5/forums/replypage/board-id/Services/message-id/1" id="link_35" class="lia-button lia-button-secondary reply-action-link lia-action-reply">Reply</a></span>    

        </div>
    </div>
</div>

 The main CSS code to control these div are:

#tt_message_kudos_top {
    float: right;
}
#tt_kudo_position {
    float: left;
}
#TT_kudos_reply {
    float: left;
}

The page looks fine in firefox, chrome, IE8,9. However, the TT_kudos_reply div automatically expand width space and float to right edge of this div. I tried to give a fix width in TT_kudos_reply will solve the problem, However, the content of the TT_kudos_reply is dynamically change. See screenshots. I also try to apply lia-button-wrapper, display:inline, also tried to clear the float of reply. I thought this should force it;s siblings to the next line.

#TT_kudos_reply { clear:right; float: left; }

it won't affect. Any suggestions? Thanks.

Cheers,

Qing