Справка по макету HTML с плавающей рамкой

Question

Какой CSS нужен для создания такого макета HTML:

+--[li]---------------------------------------------+
|+--[div]-------------------------------------++---+|
|| A label with some text, truncate if necess…||BOX||
|+--------------------------------------------++---+|
|+--[div]------------------------------------------+|
|| Another label, truncate if necessary            ||
|+-------------------------------------------------+|
+---------------------------------------------------+

• внешний <li> имеет фиксированную ширину, плавающий влево вместе с другими элементами списка в списке
• КОРОБКА должна плавать вправо, над верхней <div>, она содержит только две буквы
• ни один текст в <div> не должен переноситься, переполнение должно быть скрыто
• все это должно работать в режиме причуд IE7, предпочтительно

В настоящее время у меня есть:

<li style="float: left; width: 175px; white-space: nowrap; overflow: hidden;">
  <div style="float: right;">XX</div>
  <div>A label with some text, truncate if necessary</div>
  <div>Another label, truncate if necessary</div>
</li>

Но я не могу заставить BOX зависать над первым ярлыком.

Answer 1

Это ожидаемый результат?

альтернативный текст http://img51.imageshack.us/img51/6603/boxf.jpg

<li style="float: left; width: 175px; white-space: nowrap; overflow: hidden;">
  <div style="float: right; position: relative; background-color: red;">BOX</div>
  <div>A label with some text, truncate if necessary</div>
  <div>Another label, truncate if necessary</div>
</li>

Пропустив position: relative, вы получите:

альтернативный текст http://img360.imageshack.us/img360/7205/box2.jpg

Answer 2

Это происходит из-за того, что правильное значение div не может плавать вокруг текста без развертки.

Попробуйте это

<li style="float: left; width: 175px; white-space: nowrap; overflow: hidden; position: relative;">
  <div style="position: absolute; right: 0px; background-color: #FFFFFF;">XX</div>
  <div>A label with some text, truncate if necessary</div>
  <div>Another label, truncate if necessary</div>
</li>

если это то, что вы хотите.

Answer 3

Вы пытались float: left первый ярлык?

Кстати, Firebug очень поможет вам в отладке ...