Maintaining justification of justified inline-block elements after manipulation using jQuery

Question

I am using text-align:justify to evenly space out inline-block elements. I am using jQuery to swap certain elements around so they fit better (eg fill the rows more efficiently). However the browser no longer justifies the swapped elements correctly. Is there any way to make the browser re-justify elements to overcome this problem?

edit Here is a jsfiddle showing the issue: http://jsfiddle.net/sprintstar/HKDd9/3/

Answer 1

The problem lies in a missing space between inline-block elements. What you miss is the text node:

$(function() {
    var eq3 = $('.container a:eq(3)');
    var eq4 = $('.container a:eq(4)');
    eq4.before(eq3).before(" ");
});​

http://jsfiddle.net/archatas/HKDd9/4/