title: wrap multi-column div around image
body: <p>This question is almost identical to <a href="https://stackoverflow.com/questions/9270724/how-to-add-floating-image-without-making-css3-multicolumn-div-narrower">How to add floating image without making CSS3 multicolumn div narrower?</a>, which was not answered.</p>
  
  <p>I have a multi-column div that I want to wrap around an image that will float in the top right of the page.  The problem is that the text in the multi-column div does not wrap, even though the div is set to float.</p>
  
  <p>Should look like:</p>
  
  <pre><code>|-||-|xxxxxx
  |-||-|xxxxxx
  |-||-|xxxxxx
  |-||-||-||-|
  |-||-||-||-|
  </code></pre>
  
  <p>Currently looks like:</p>
  
  <pre><code>      xxxxxx
        xxxxxx
        xxxxxx
  |-||-||-||-|
  |-||-||-||-|
  |-||-||-||-|
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;img src="something.png"/&gt;
  &lt;div&gt;some really long text&lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>img {
      float: right;
      clear:none;
  }
  div {
      -moz-column-count: 4;
      -webkit-column-count: 4;
      column-count: 4;
  
      -moz-column-width:157px; /* Firefox */
      -webkit-column-width:157px; /* Safari and Chrome */
      column-width:157px;
  
      float:left;
      clear:none;
  }
  </code></pre>
  
  <p>I have a jsfiddle here:
  <a href="http://jsfiddle.net/JpcM4/2/" rel="nofollow noreferrer">http://jsfiddle.net/JpcM4/2/</a></p>
  
  <p>The challenge is that I do not know how much text is going to be in the div, and I do not know how wide the image is.  That means I can't just have four divs for four columns and float them separately, since I don't know what text is in each column or even which columns will be shortened by the image.</p>
  
  <p>I also looked at column-span and -webkit-column-span (which would not work for Firefox anyway), but it seems that's not what I'd thought: <a href="http://www.w3.org/TR/css3-multicol/" rel="nofollow noreferrer">http://www.w3.org/TR/css3-multicol/</a></p>