Unable to clear float:left

Question

I have the problem in this JS Fiddle.

Main problem is with the float: left property.

I have the code which allows to drag and drop the elements which have the float: left property. They are creating the problem when I want to placing the controls parallel in the next div area.

The problem is more clear, if you look into the JS Fiddle. Following are the steps to go through Fiddle

1. click on the add div button
2. it divides the red div into the two boxes
3. now drag at least two or three upper controls(e.g firstname, last name) into the left side red box
4. now drag the another control to the right side box

Here is the problem, the control in the right side div is placed left to the last control of the left side div.

Myhtml.html

<input type="button" class="Mybutton" value=" Add div" />
<br />

<div class="selectorField draggableField ui-draggable ui-resizable" style=" width:250px;">
    <div id="new" style="margin-bottom:10px; ">
        <div style="width:80px; float:left;">
            <span id="LabelU1">FirstName : </span>
        </div>
        <div style="resize:horizontal; overflow:auto; width: 90px; border: solid gray 1px; float:left;">
            <input name="FirstName" type="text" id="FirstName" style="width:90%;;border:none;resize:none;float:left;">
        </div>
    </div>
    <div style="clear:both;"></div>
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
</div>
<div height="100%" width="100%"></div>
<div class="selectorField draggableField ui-draggable ui-resizable" style=" width:250;">
    <div id="new" style="margin-bottom:10px; ">
        <div style="width:80px; float:left;">
            <span id="LabelU2">LastName : </span>
        </div>
        <div style="resize:horizontal; overflow:auto; width: 90px; border: solid gray 1px; float:left;">
            <input name="LastName" type="text" id="LastName" style="width:90%;;border:none;resize:none;float:left;">
        </div>
    </div>
    <div style="clear:both;"></div>
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
</div>
<div height="100%" width="100%"></div>
<div class="selectorField draggableField ui-draggable ui-resizable" style=" width:200px;">
    <div id="new" style="margin-bottom:10px; ">
        <div style="width:80px; float:left;">
            <span id="LabelU3">Web : </span>
        </div>
        <div style="resize:horizontal; overflow:auto; width: 90px; border: solid gray 1px; float:left;">
            <input name="Web" type="text" id="Web" style="width:90%;;border:none;resize:none;float:left;">
        </div>
    </div>
    <div style="clear:both;"></div>
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
</div>
<div height="100%" width="100%"></div>
<div class="selectorField draggableField ui-draggable ui-resizable" style=" width:250px;">
    <div id="new" s tyle="margin-bottom:10px; ">
        <div style="width:80px; float:left;">
            <span id="LabelU4">Mobile : </span>
        </div>
        <div style="resize:horizontal; overflow:auto; width: 90px; border: solid gray 1px; float:left;">
            <input name="Mobile" type="text" id="Mobile" style="width:90%;;border:none;resize:none;float:left;">
        </div>
    </div>
    <div style="clear:both;"></div>
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
</div>
<div height="100%" width="100%"></div>
<div class="selectorField draggableField ui-draggable ui-resizable" style=" width:250px;">
    <div id="new" style="margin-bottom:10px; ">
        <div style="width:80px; float:left;">
            <span id="LabelU5">jot : </span>
        </div>
        <div style="resize:horizontal; overflow:auto; width: 90px; border: solid gray 1px; float:left;">
            <input name="jot" type="text" id="jot" style="width:90%;;border:none;resize:none;float:left;">
        </div>
    </div>
    <div style="clear:both;"></div>
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
</div>
<div height="100%" width="100%"></div>


<div id="Section1" style="height: 100px; line-height: 20px; width: 100%; border: 1px dotted red; display: table;">
    <div class="well droppedFields ui-sortable Resizable" style="width:73px;"></div>
</div>

Myjquery.js

function makeDraggable() {
            $(".selectorField")
                .draggable({
                containment: $('body'),
                helper: "clone",
                stack: "div",
                cursor: "move",
                cancel: null
            });
        }


        $(function () {
            var _ctrl_index = 1001;
            // function docReady() {


            $(".Resizable").resizable({
                handles: 'e'
            });

            makeDraggable();

            $(".droppedFields").droppable({
                accept: ":not(.ui-sortable-helper)",


                drop: function (event, ui) {


                    var draggable = ui.draggable;
                    draggable = draggable.clone();
                    draggable.appendTo(this);
                    //   $(ui.draggable).hide();

                    makeDraggable();
                }
            });


            var count = 0;
            $('.Mybutton').click(function () {
                count++;
                if (count < 5) {
                    // alert("aa");

                    var a = $("<div class='well droppedFields ui-sortable Resizable'></div>").appendTo("#Section1");
                    a.droppable();
                    a.resizable({
                        handles: 'e'
                    });
                    a.droppable({
                        accept: ":not(.ui-sortable-helper)",


                        drop: function (event, ui) {


                            var draggable = ui.draggable;
                            draggable = draggable.clone();
                            draggable.appendTo(this);
                            //   $(ui.draggable).hide();

                            makeDraggable();
                        }
                    });

                } else {
                    alert('No more divs to add');
                }
            });
        });

Answer 1

You are very, very close. Simply use vertical-align like so:

 #Section1 > div {
     display: table-cell;
     /*width: 1%;*/
     border-right: 1px dotted red;
     text-align: center;
     vertical-align: top;  /* vertical-align to the rescue!!! */
 }

Just need a tiny fix, vertical-align will be your friend!! :)

http://jsfiddle.net/tdorbbv6/106/