How to make div item stack

I have the following code that works fine i am trying to get the items to stack when they get moved into boxA. How would i go about that?

$(function () {
    $("#sortable").sortable();
    $("#boxA").droppable({
        activeClass: 'ui-state-hover',
        hoverClass: 'ui-state-active',
        drop: function (event, ui) {
            $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
            find('li').children().remove();
        }
    });

---

<div id='main_content'>
    <ul id="sortable">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
    <div id='boxA' class='ContentBoxes'>
        <开发者_JS百科;div class='ContentMenu'>Column A</div>
        <p>Drop an item on me.</p>
    </div>​

---

From the small amount of code you've given I recon the problem comes from the fact you're appending the li's onto a div and they should really go into a ul.

If you append them into a ul within #boxA they should stack below each other automatically.

If you want them to stack on top of each other then you will need to add some CSS to make them absolutely positioned within the ul they are being dropped into.

---

You could do this in css:

#boxA li { display: block; }