HTML layout help with floating box

Question

What CSS is needed to create such an HTML layout:

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

• the outer <li> is fixed-width, floating left with the other list items in the list
• the BOX should float to the right, above the upper <div>, it contains only two letters
• none of the text in the <div>s should wrap, overflow should be hidden
• the whole thing should work in IE7 quirks mode, preferably

Currently I have:

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

But I can't get BOX to hover over the first label.

Answer 1

Did you try to float: left the first label?

BTW, Firebug will help you a lot in debugging...

Answer 2

Is this the intended result?

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

Omitting the position: relative, you would get:

Answer 3

This happens because right-floated div cannot float around nonwrappable text.

Try this

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

if this what you want.