CSS: Two fields, left one flexible width, right one takes up remaining space

Question

------------- --------------------------------------------------
| some text | | some more text, sometimes more, sometimes less |
------------- --------------------------------------------------

|<------------------------- 100% width ----------------------->|

So I have the above layout. The left box should always be as small as possible, while the right one should take up the remaining space. That would normally be fine with a float: left.

The problem is that the right box can grow quite a lot, while the left one is pretty much guaranteed to be very small (yet varies in size, so needs to be flexible). If the right box grows, I need it to behave like this:

------------- --------------------------------------------------
| some text | | quite a lot of text, actually, really quite a  |
------------- | bunch of it, you could say this is really      |
              | quite a heck of a lot of text                  |
              --------------------------------------------------

If I use a float:left, the right box will line-break under the left box if it contains a lot of text:

-------------
| some text |                                         (not good)
-------------
----------------------------------------------------------------
| quite a lot of text, actually, really quite a bunch of it,   |
| you could say this is really quite a heck of a lot of text   |
----------------------------------------------------------------

If I use a table for both instead, the left box may grow unnecessarily if both contain very little text:

                                                      (not good)
-------------------------------- -------------------------------
| some text                    | | not that much text          |
-------------------------------- -------------------------------

Furthermore, the left box is not supposed to line-break. But since it contains a few HTML elements, not just pure text, a no-wrap doesn't seem to work in all browsers.

What's a good solution to this problem?

EDIT

It's not actually terribly important that the right box takes up the remaining width, just that it always stays attached to the right side of the left box.

Answer 1

For the right box use overflow: hidden; width: auto; instead of floating. That should take the remaining space without dropping below no matter how much content there is. Continue floating the left box.