How to force jQuery resizable to use percentage?

Question

I am trying to use the jQuery resizable to resize my div, I've got it to work pretty good except that after the stop event, jQuery UI would revert my % value back to pixel value.

I've a working fiddle here: http://jsfiddle.net/totszwai/j60h38fy/5/

When you drag the current container for the first time, it would calculate all the value correctly, but after the stop event, jQuery UI would update the % and change it back to pixel... so next time you drag it again, the % is lost.

How do you force jQuery to set the width value to %? I could technically use something like setTimeout, but that would be way too ugly.

And I do not want a solution to manipulate the divs in pixel, because I could technically add n-divs in my setup and that code with % should work with n-divs.

If you take a look at my neighbor div, the % is kept there, only the current got overwritten. I've also tried to play around with ui.element directly as well as setting the ui.size.width to my % but none of that work either.

Update: A workaround is to store the data everytime at the stop event and never check it again at the start, however, this still doesn't solve the issue where stop returns incorrect pixel value. See updated jsFiddle: http://jsfiddle.net/totszwai/j60h38fy/6/

If only jQuery resizable take my % value, everything would've worked as expected.

Solved: Well, I've accepted apaul34208's answer, since i did asked for how to use %. However, to actually solve what I originally wanted to solve, I end up using pixels instead. See the answer that I posted below, if that answer helped you, please upvote that instead.

Answer 1

I ran into this same issue and the chosen solution doesn't work for me because I need this to generalize to any number of columns. Also codenamezero's answer did not deal with the fact that the original question requires that percentages for widths are used.

For my case using percentages for width is essential because I'm implementing a table editor and the table that is saved must dynamically change size depending on where it is rendered.

So I came up with this solution which works similar to codenamezero's solution but in the stop the changed widths are set to be percentages:
http://jsfiddle.net/genpsire/4mywcm1x/14/

$(document).ready(function () {

    var container = $(".wrapper");
    var numberOfCol = 3;
    $(".test").css('width', 100/numberOfCol +'%');

    var sibTotalWidth;
    $(".test").resizable({
        handles: 'e',
        start: function(event, ui){
            sibTotalWidth = ui.originalSize.width + ui.originalElement.next().outerWidth();
        },
        stop: function(event, ui){     
            var cellPercentWidth=100 * ui.originalElement.outerWidth()/ container.innerWidth();
            ui.originalElement.css('width', cellPercentWidth + '%');  
            var nextCell = ui.originalElement.next();
            var nextPercentWidth=100 * nextCell.outerWidth()/container.innerWidth();
            nextCell.css('width', nextPercentWidth + '%');
        },
        resize: function(event, ui){ 
            ui.originalElement.next().width(sibTotalWidth - ui.size.width); 
        }
    });
});

Please select this solution so others don't spend their morning pulling their hair out trying to generalize apaul34208's solution to the n columns case. (like I did!)