title: How to force inline-block elements to wrap?
body: <p>I have an inline-block div.</p>
  
  <pre><code>.element {
  display: inline-block;
  }
  </code></pre>
  
  <p>I use jquery to repeatedly append it to the DOM.</p>
  
  <pre><code>  var element = $("&lt;div class='element'&gt;");
    $(body).append(element).append(element).append(element).append(element);
  </code></pre>
  
  <p>However the appended divs do not wrap.  It is as if I had the following mark-up (no newlines)</p>
  
  <pre><code>&lt;div class="element"&gt;&lt;/div&gt;&lt;div class="element"&gt;&lt;/div&gt;&lt;div class="element"&gt;&lt;/div&gt;&lt;div class="element"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Appending whitespace inbetween the elements does not fix problem:</p>
  
  <pre><code>  $(body).append(element).append(" ");
  </code></pre>
  
  <p>How can I force these elements to wrap?  (I do not want to use floats).</p>