title: How to do a `float: left` with no wrapping?
body: <p>I have a container <code>box1</code> that has a certain width (which might change depending on its content). That box contains <code>box2</code> which has a fixed width (it could be an icon). Next to <code>box2</code>, I have <code>box3</code> with  some text. I want the text to use all the space available to the right of <code>box2</code>. With the HTML pasted below, you get:</p>
  
  <p><img src="https://i.stack.imgur.com/PAtsf.png" alt="Short text"></p>
  
  <p>So far so good. If the text gets longer, it doesn't wrap around <code>box2</code> (which is what I want), however, it doesn't make <code>box1</code> grow, which is my problem. You'll tell me "hey, if you made <code>box3</code> a <code>position: absolute</code>, how could you expect it to make <code>box1</code> grow?". Well, I don't but then, how can I get <code>box3</code> to show next to <code>box2</code>, use all the horizontal space available, and make <code>box1</code> grow if necessary? (Do I need to say that I'd like this work on IE6 onward, and to avoid using a table?)</p>
  
  <p><img src="https://i.stack.imgur.com/5vEEq.png" alt="Long text"></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
          &lt;style type="text/css"&gt;
              #box1 { position: relative }
              #box3 { position: absolute; left: 2.5em; right: .5em; top: .5em }
  
              /* Styling */
              #box1 { background: #ddd; padding: 1em 0.5em; width: 20em }
              #box2 { background: #999; padding: .5em; }
              #box3 { background: #bbb; padding: .5em; }
              body  { font-family: sans-serif }
          &lt;/style&gt;
          &lt;script type="text/javascript"&gt;
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="box1"&gt;
              &lt;span id="box2"&gt;2&lt;/span&gt;
              &lt;span id="box3"&gt;3&lt;/span&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>