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/