title: How to wrap text around a floated div as it doesn't work if text is too short?
body: <p>The part of this code that's acting up is the text where it says TEXT HERE. If this line of text is long enough, it wraps nicely around <code>&lt;div class="pic"&gt;</code>. If it's short, however, it shows up <em>below</em> <code>&lt;div class="pic"&gt;</code>.</p>
  
  <p>How can I get it to wrap around the div no matter how long it is?</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 30px 0px 30px 0px;
    text-align: center;
  }
  
  .main {
    text-align: center;
    background-color: #ffffff;
    opacity: 0.92;
    border-radius: 12px;
    padding: 30px 55px 30px 55px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: auto;
    margin-left: auto;
    display: inline-block;
    max-width: 600;
  }
  
  div,
  fieldset {
    overflow: auto;
  }
  
  div {
    margin-bottom: 30px;
  }
  
  fieldset {
    border: 1px solid #5C5C5C;
    border-radius: 5px;
    background-color: #DEF4FF;
    text-align: left;
    padding: 10 15 15 15;
    margin-top: 15px;
  }
  
  .pic {
    float: left;
    width: 150px;
    height: 150px;
    border: 1px solid #555555;
    margin: 0px 15px 15px 0px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;span class="main"&gt;
        &lt;h2&gt;asdf&lt;/h2&gt;
        &lt;div style="text-align: left; margin: 0px;"&gt;
         &lt;div class="pic" style="background: url(http://blabla.jpg) 50% 50% no-repeat; background-size: auto 100%;"&gt;
         &lt;/div&gt;
         &lt;br /&gt;
         TEXT HERE
        &lt;/div&gt;
        &lt;fieldset&gt;
         &lt;legend&gt;Ingredients&lt;/legend&gt;
         &lt;ul&gt;
          &lt;li&gt;&lt;a href="display_ingredient.php?name=Allspice" target="_blank"&gt;allspice&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
        &lt;/fieldset&gt;
        &lt;br /&gt;
        &lt;a target="_blank" href="edit_recipe.php?name=asdf"&gt;Edit&lt;/a&gt;
        &amp;nbsp;
        &lt;span style="font-size: 20;"&gt;
         &amp;#8226;
        &lt;/span&gt; &amp;nbsp;
    &lt;a target="_blank" href="delete_recipe.php?name=asdf"&gt;Delete&lt;/a&gt;
    &lt;/span&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/aPSqW/" rel="nofollow noreferrer">http://jsfiddle.net/aPSqW/</a></p>