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

Try this,

<div style="border:solid 1px black; width:20%; height:200px;float:left">
  Hello
</div>
<div style="border:solid 1px black; width:78%; height:200px;float:right;">
  Hello
</div>

Answer 2

Define a fixed width to the left column as well as float:left; put it after the main column in the HTML

Two divs for the right column; the outer one also floated left and with 100% width, the inner with a left margin of the same width as the left column.

Answer 3

As Stobor suggested: Try putting the left box inside the right box

<div id="rightBox">
   <div id="leftBox">This text will expand the left box</div>
   <div style="float:left">
      Content of right box goes here<br>
      Breaking even works...
   </div>
</div>

CSS:

#rightBox {
   width: 100%;
   background: red;
}
#leftBox {
   width: auto;
   float: left;
   background: blue;
}

Works for me.

Answer 4

If you're using a pure css solution I think you're going to have to give one of the columns some sort of width constraint. Can it definitely not be a percentage as suggested above?

The problem being 2 fold. If you float one column and give the other a width of 100%, because the floated column is removed from the document flow the 100% width of the other is the full viewport width (it ignores the floated div). If you float both without setting the width of the second div the div will(should) shrink to the width of it's widest child element. the w3c spec maybe of some help, though it's not the easiest read.

You could always try using javascript to read the viewport width and then setting the column widths, otherwise I think you're going to struggle.

Answer 5

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.