IE7 Div width bug

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 sp开发者_JAVA百科ace 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, it won't affect.

Any suggestions? Thanks.

Cheers, Qing

Initial thought - clear the float of reply. This should force it's siblings to the next line:

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

But without seeing more of your CSS, it's hard to make a solid suggestion.

If you'd be up for an easy refactor, you could do the following (assuming the "Accept as Solution" is intended to fall below "Reply")... Instead of a div for both, hard code the width of tt_kudo, then use a definition list for the reply and accept button.

<div>Kudo</div>
<dl>
    <dt>Reply</dt>
    <dd>Accept</dd>
</dl>

Since the default behavior of the DL seems to work with your design, styling it to meet your needs should prove easy to do.