title: How to make text wrap above and below a div?
body: <p>I have no problem getting text to wrap around a div when tops of the elements are aligned, but I can't figure out how to have the text wrap above and below the div.  </p>
  
  <p>For example I want the text to be the full width of #container for 40px, then wrap around it to the right, and then go full width again.  </p>
  
  <p>See it at <a href="http://jsfiddle.net/cope360/wZw7T/1/">http://jsfiddle.net/cope360/wZw7T/1/</a>.  Where I added the top-margin to #inset is where I'd like the text to wrap.  Is this possible?</p>
  
  <p>CSS:</p>
  
  <pre><code>#inset {
      width: 100px;
      height: 100px;
      background: gray;
      float: left;
      margin-top: 40px;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
          &lt;div id="inset"&gt;Inset&lt;/div&gt;
          This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around.
  &lt;/div&gt;
  </code></pre>