Mis-alignment of asp:BulletedList <ul> when emptied

Question

I have two asp:BulletedList's in a div "style=display:table". The idea is that one will contain asp:ListItems that the user can drag and drop between them to create another list of selected items.

This is the code

<div style="width:90%; display:table; border:1px solid green">
    <div style="width:100%; display:table-row">
        <div style="width:35%; display:table-cell; border:1px solid gray">
            <asp:BulletedList runat="server" ID="blAvailableDocuments" Height="150px" BorderStyle="Solid" BorderWidth="1px" BorderColor="red">
                <asp:ListItem Text="AvailableLI1">
                </asp:ListItem>
                <asp:ListItem Text="AvailableLI2">
                </asp:ListItem>
            </asp:BulletedList>
        </div>
        <div style="width:30%; display:table-cell; text-align:center">
            <asp:Button runat="server" Text=">>" ID="btnAddAll" OnClientClick="AddAll(); return false" /><br /><br />
            <asp:Button runat="server" Text="<<" ID="btnRemoveAll" OnClientClick="RemoveAll(); return false" />
        </div>
        <div style="width:35%; display:table-cell; border:1px solid gray">
            <asp:BulletedList runat="server" ID="blSelectedDocuments" Height="150px" BorderStyle="Solid" BorderWidth="1px" BorderColor="Gray">
                <asp:ListItem Text="SelectedLI1">
                </asp:ListItem>
                <asp:ListItem Text="SelectedLI2">
                </asp:ListItem>
            </asp:BulletedList>
        </div>
    </div>
</div>

Simple right? theres also this JQuery here that allows the re-ordering within each list and the dragging and dropping between them.

    $(function ()
    {
        $("#ctl00_PlaceHolderMain_blAvailableDocuments").sortable();
        $("#ctl00_PlaceHolderMain_blAvailableDocuments").disableSelection();

        $("#ctl00_PlaceHolderMain_blSelectedDocuments").sortable();
        $("#ctl00_PlaceHolderMain_blSelectedDocuments").disableSelection();
    });

    $(function ()
    {
        $("#ctl00_PlaceHolderMain_blAvailableDocuments").draggable({
            drag: function (event, ui)
            {
                if (ui.draggable[0].hasAttribute("ID"))
                {
                    return;
                }
            }
        });
        $("#ctl00_PlaceHolderMain_blAvailableDocuments").droppable({
            drop: function (event, ui)
            {
                var source = ui.draggable[0].parentElement.id;
                var target = event.target.id;

                if (source != target)
                {
                    Move(ui.draggable[0], source, target);
                }
            }
        });

        $("#ctl00_PlaceHolderMain_blSelectedDocuments").draggable({
            drag: function (event, ui)
            {
                if (ui.draggable[0].hasAttribute("ID"))
                {
                    return;
                }
            }
        });
        $("#ctl00_PlaceHolderMain_blSelectedDocuments").droppable({
            drop: function (event, ui)
            {
                var source = ui.draggable[0].parentElement.id;
                var target = event.target.id;

                if (source != target)
                {
                    Move(ui.draggable[0], source, target);
                }
            }
        });
    });

    function Move(element, from, to)
    {
        var fromBL = document.getElementById(from);
        var toBL = document.getElementById(to);
        var newLI = document.createElement("li");
        newLI.innerHTML = element.innerHTML;
        fromBL.removeChild(element);
        toBL.appendChild(newLI);
    }

The condition whether the element has an ID is to stop the list itself from being dragged, I think it errors, which does what I need, but FYI the problem I have occurs without that.

(Cant post pics here yet....... for a reason)

https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/946310_10151467867553519_1667792056_n.jpg

Dragging and dropping works fine apart from... When I drag and drop so that there are no remaining ListItems in either one of the BulletedLists this happens.

https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-prn1/945900_10151467867548519_1597804249_n.jpg

Any ideas, muchas grazias and danke for any help.

Answer 1

It is furiously annoying how simple the answer was, and more-so that nobody told me.

Instead of display:table/row/cell I used float:left, float:right and then margin:auto for the center

    <div style="width:35%; border:1px solid gray; float:left">
        <asp:BulletedList runat="server" ID="blAvailableDocuments" RenderWhenDataEmpty="true" Height="150px">
        </asp:BulletedList>
    </div>
    <div style="width:35%; border:1px solid gray; float:right">
        <asp:BulletedList runat="server" ID="blSelectedDocuments" RenderWhenDataEmpty="true" Height="150px">
        </asp:BulletedList>
    </div>
    <div style="width:30%; text-align:center; margin:auto">
        <asp:Button runat="server" Text=">>" ID="btnAddAll" OnClientClick="AddAll(); return false" UseSubmitBehavior="false" /><br /><br />
        <asp:Button runat="server" Text="<<" ID="btnRemoveAll" OnClientClick="RemoveAll(); return false" UseSubmitBehavior="false" />
    </div>

Three days that took me.... THREE DAYS!!!