Wrap div below absolute positioned div in fluid layout

Question

I have a fluid image rotator that scales with the browser. I have to have the images inside the rotator set to absolute but this affects the layout with the 'body-content' falling behind the image. If the images are set to relative then the image rotator doesn't work. I've been looking at this all day does anyone have any ideas? Here's my code:

HTML:

<div id="main-image">
  <div id="rotator">
    <img src="image1.jpg" border="0" alt=""/>
    <img src="image2.jpg" border="0" alt="" /> 
    <img src="image3.jpg" border="0" alt="" />
  </div>
</div>
<div id="body-content"></div>

CSS:

#main-image {
  width: 100%;
  border: 1px solid blue;
}
#main-image IMG.active {
  z-index:10;
}
#main-image IMG.last-active {
  z-index:9;
}
#rotator {
  width: 100%;
  height: auto;
  position:relative;
}
#rotator img{
  position: absolute;    
  width: 100%;
  border: 1px solid red;
}
#body-content {
  margin-top: 15px;
  height: 50px;
  border: 1px solid red;
  width: 100%;
}

Here's my fiddle: http://jsfiddle.net/fatfrank44/Q7vpD/8/

Thanks

Answer 1

Here is a fiddle. All I did is set the height of #main-image to the height of the images inside of it, so that the body-content div is pushed down.

$('#main-image').height($('#rotator img:first').height());

Fiddle with window resize and working slider