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.

Answer 2

I would recommend styling the element class with css to create the whitespace. If you don't want to do this you can always try to append a non-breaking space.

var element = $("<div class='element' />&nbsp;");

Answer 3

Alternatively, if the ::before pseudo element isn't being used, you can utilize it's powers to solve this issue.

element:before { /* single : to support older browsers */
    display:block;
    width:100%;
}

this is a solution for inline elements

Answer 4

You can give the elements width in terms of percentage. Change the percentage value with regard to the number of elements and how you want to wrap it.