Why doesn't div height adjust to loaded content?

Why doesn't div height adjust to loaded content?

Hi there,

I have written the following code. It loads a random banner from an external file and places it on my page.

JQuery
$(document).ready(function() {
   $('#banner_area').load('banner_area.htm .banner', function() {
      $(this).cycle({
         timeout: 0,
         random: 1,
         cleartype: 1,
         autostop: 1,
         autostopCount: 1
      });
   });
});


html
<div id="banner_area"></div>
<div id="second_div">Example text</div>


The problem is that when the banner is loaded within the top div ( id="banner_area"), it overlaps the div beneath it which has id="second_div". I think this might be because the height of the div "banner_area" is set before the content is loaded. In other words, the height of the div doesn't adjust to allow the content to fit.

Is there a way round this?

Many thanks [/b]