How to force inline-block elements to wrap?

Question

I have an inline-block div.

.element {
display: inline-block;
}

I use jquery to repeatedly append it to the DOM.

  var element = $("<div class='element'>");
  $(body).append(element).append(element).append(element).append(element);

However the appended divs do not wrap. It is as if I had the following mark-up (no newlines)

<div class="element"></div><div class="element"></div><div class="element"></div><div class="element"></div>

Appending whitespace inbetween the elements does not fix problem:

  $(body).append(element).append(" ");

How can I force these elements to wrap? (I do not want to use floats).

Answer 1

If they are simply div elements set to inline-block they should wrap like so: http://jsfiddle.net/72cYy/

Check and be sure their container/parent element does not have a white-space:nowrap. That would cause them to not wrap.