How to make div item stack

Question

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'>
        <div class='ContentMenu'>Column A</div>
        <p>Drop an item on me.</p>
    </div>​

Answer 1

You could do this in css:

#boxA li { display: block; }

Answer 2

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.