[jQuery] append() does not properly resize div when adding content

[Eric-Sebastien Lachance]

Hello,

I'm creating a page that lists the available songs that I have for
karaoke, and I'm having some difficulties with formatting. I'm using
jquery to retrieve an XML created by php, and outputting it to the
html page using jquery's append() function. However, when I do this,
the DIV that contains the data (the one I'm appending) simply does not
re-size with the data - so I have a div that's a few pixels high, and
a data list that just floods out of it in the emptiness of my body
background (white).

The page is here:
http://lucas.is-a-geek.com:8181/jquery/

The append code is:
    $.get('backend.php', function(parsexml){

        $(parsexml).find('song').each(function(){

                        var id = $(this).find("ID").text();
                        var artist = $(this).find("artist").text();
                        var title = $(this).find("title").text();

                        html = "<div id=\"songid" + id + "\" style=\"float: 
left; width:
830px; height: 20px; border-top:1px solid #000;\">";
                        html = html + "<div class=\"artist\" style=\"float: 
left; width:
250px\">" + artist + "</div>";
                        html = html + "<div class=\"title\" style=\"float: 
left; width:
300px\">" + title + "</div>";
                        html = html + "</div>";

                        $("#resultscontainer").append(html);
                        //$("#resultscontainer").append("<p id=songid" + id + " 
class=
\"trigger ui-state-default\"><a href=\"#\">" + author + " - " + title
+ "</a></p>");
                });
        });

The DIV is simply:
        <div id="resultscontainer" class="ui-state-highlight ui-corner-all"
style="height: 100px; width:835px;">
        </div>

Does anyone know how to fix this? I've tried setting a % or px height
to the div, with no change in behavior. Oh, it happens both in Firefox
and Internet Explorer equally.