you're declaring a fixed height inline. the div is being told to only be 100px tall, so it doesn't matter how much content is inside it. try replacing height: 100px with float: left;
On Jun 12, 11:38 am, Eric-Sebastien Lachance <eslacha...@gmail.com> wrote: > 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.
