title: CSS: Float with multiline content: Minimal width
body: <p><strong>Is it possible to have a floating element that has multiline content to take minimal width?</strong></p>
  
  <p>Floating elements without a set width use up the least amount of width as long as their content is just one line. If it is more than one line, the width of the element is 100%. </p>
  
  <h3>My HTML</h3>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="wrap"&gt;
      &lt;div class="floater"&gt; &lt;a class="left" href="#"&gt;
              &lt;span class="right"&gt;Right&lt;br&gt;Right&lt;br&gt;Right&lt;/span&gt;
              &lt;span class="inner"&gt;Left: longword longerword evenlongerword longerword evenlongerword longword.
              &lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>My CSS</h3>
  
  <pre class="lang-css prettyprint-override"><code>.wrap {
      width: 350px;
      border: 1px solid gold;
  }
  .floater {
      overflow: hidden;
      padding: 10px;
  }
  .left {
      float: left;
      border: 1px solid silver;
      padding: 5px;
  }
  .right {
      float:right;
      margin: 0 10px;
      border: 1px solid green;
      padding: 5px;
  }
  .inner {
      border: 1px solid red;
      display: block;
      overflow: hidden;
      padding: 5px;
  }
  </code></pre>
  
  <h3>My fiddle</h3>
  
  <p><a href="http://jsfiddle.net/HerrSerker/qBfbc/" rel="nofollow noreferrer">http://jsfiddle.net/HerrSerker/qBfbc/</a></p>
  
  <h3>My image</h3>
  
  <p><img src="https://i.stack.imgur.com/R2SJk.png" alt="enter image description here"></p>