Wrap div ниже абсолютного положения div в макете текучей среды

Question

У меня есть ротатор изображения жидкости, который масштабируется с помощью браузера. Мне нужно, чтобы изображения внутри ротатора были абсолютными, но это влияет на макет с «содержимым тела», падающим за изображение. Если изображения установлены на относительные, то ротатор изображения не работает. Я смотрю на это весь день, у кого есть идеи? Вот мой код:

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%; 
} 

Вот моя скрипка: http://jsfiddle.net/fatfrank44/Q7vpD/8/

Благодаря

Answer 1

Here is a fiddle. Все, что я сделал это набор высоты #main-image на высоту изображений внутри него, s o о том, что div тела body-контента нажата вниз.

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

Fiddle with window resize and working slider