Javascript-форум - float + nowrap

Стоит задача: вытянуть содержимое .crossbar в одну строку, при этом таким образом, чтобы элемент .image был выровнен по правому краю.

Сделал следующий пример, иллюстрирующий проблему:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
        <title>Float right wrap test</title>

        <style type="text/css">
            .content {
                border: 1px solid #ccc;
                border-collapse: collapse;
            }

            .content td {
                padding: 0;
            }

            .crossbar {
                overflow: hidden !important;
                width: 300px;
                padding: 1px 0;
                line-height: 17px;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .wrap {
                white-space: normal;
            }

            .grey {
                color: #777;
            }

            .image {
                float: right;
                overflow: hidden;
                width:16px;
                height: 16px;
                margin: 0 3px 0 10px;
                background-color: red;
            }
        </style>

        <script type="text/javascript">
        function toggle_wrap() {
            var el = document.getElementById('to-toggle-wrap');
            if (-1 == el.className.indexOf('wrap')) {
                el.className += ' wrap';
            } else {
                el.className = (' ' + el.className + ' ').replace(/ wrap /g, '');
            }
        }
        </script>
    </head>

    <body>
        <button onclick="toggle_wrap()">Toggle Wrap</button>
        <table class="content">
            <tbody>
                <tr>
                    <td><div id="to-toggle-wrap" class="crossbar"><div class="image"></div>Short text<span class="grey"> This is additional looooong text. Long text is looooooooooong and no-wrapped</span></div></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

1. Если переместить .image в конец td, то он переносится под текст.
2. Из набора IE, FF, Opera только IE8 делает то, что нужно (черт!)
3. Как видно из примера, снятие word-wrap и выставление для .crossbar жесткой высоты проблему решает, но хочется найти решение с резиновой высотой.

Может, у кого-то будут мысли на этот счет?