Div is moving up (and over) a resizable div on resize

Question

Sorry for the title, I didn't know how to explain the issue properly.

I am trying to add divs to a container and be able to move them around to position them. If you look at this fidddle and hover over the div (not the red one, the one wrapping it), you will be able to click the "New Container" button and it will add a container. However, if you resize this container, you will see the div below it jump up on top of it.

Am I doing something wrong or is this intended functionality? I don't want any overlap and would ideally like the new div to either be above or below the existing div (based on where you drag it).

EDIT:

To recreate the issue, please hover next to the red box (not on) and you will see a selection box appear. Click once when this appears and then click the New Container button. This will add a div above the red box. If you try and re-size the red box then the red div moves up.

EDIT 2

Ok I have noticed "why" this is happening. JQuery changes the element to be absolutely positioned on resize so this stops the float working. Is there any way to remove this?

Html:

<div class="editable_content" style="padding:10px;">
    <div style="width: 100%; padding:10px; height: 400px;">
        <div style="width:100%; float:left; height:100px; background:red"></div>
    </div>
</div>

<input type="button" id="new_container" value="New Container" />

CSS:

.edit_mouse_on {
    background-color: #bcd5eb !important;
    outline: 2px solid #5166bb !important;
}
.edit_selected {
    outline: 2px solid red !important;
}

.ui-resizable-helper { border: 2px dotted #00F; }

JS:

var prevElement = null;
var selectedElement;
var enableHoverAction = true;
var allowedEditableClasses = "editable_content"
var hoverClass = "edit_mouse_on";
var selectedClass = "edit_selected";

document.addEventListener('mousemove', function (e) {
    var elem = e.target || e.srcElement;
    if (prevElement != null) detach(prevElement);
    attach(elem);
    prevElement = elem;
}, true);

function attach(obj) {
    if (enableHoverAction) {
        if (obj != null) {
            if ($(obj).parents("div.editable_content").length) {
                $(obj).addClass(hoverClass);
                $(obj).bind("click", function (e) {
                    e.preventDefault();
                    select(this);
                });
            }
        }
    }
}

function select(obj) {
    selectedElement = obj;
    enableHoverAction = false;
    $(obj).addClass(selectedClass);
    $(obj).removeClass(hoverClass);
}

function detach(obj) {
    if (enableHoverAction) {
        if (obj != null) {
            $(obj).removeClass(hoverClass);
            $(obj).unbind("click");
        }
    }
}

$(document).ready(function () {
    $("#new_container").click(function () {
        $("<div/>", {
            "style": "border:1px solid black; width:100px;height:100px; float:left;margin-bottom:1px;display:inline;clear:both",
            text: "",
        }).resizable({
            helper: "ui-resizable-helper"
        }).draggable({
            cursor: "crosshair",
            cursorAt: {
                top: 0,
                left: 0
            }
        }).prependTo(selectedElement);
    });
});

Answer 1

It seems my question is a duplicate in a fashion but I will post this as an answer as I think it may be more helpful then deleting my post (as I couldn't see anything when searching):

How to prevent Resizable and Draggable elements from collapsing on each other?