Div выпрыгивает из пространства при изменении размера окна

Question

Исправлено! (ответ ниже)

У меня есть этот анимированный баннер, который я включаю на всех страницах. К сожалению, он выходит из своего пространства, когда окно браузера изменяется.

Вы можете проверить его здесь: http://www.paparashie.nl/woonkans/

Вот код:

<style> 

#banner{ 
    position: relative; 
    margin-left:-1000px; 
    height:195px; 
    width:1000px; 
    z-index:1; 
} 

#banner img{position:absolute;z-index:1} 
#banner img.active{z-index:4} 

<script> 
    function cycleImages() { 
    var $active = $('#banner .active'); 
    var $next = ($active.next().length > 0) ? $active.next() : $('#banner img:first'); 
    $next.css('z-index', 2); //move the next image up the pile 
    $active.fadeOut(1500, function() { //fade out the top image 
     $active.css('z-index', 1).show().removeClass('active'); //reset the z-index and unhide the image 
     $next.css('z-index', 3).addClass('active'); //make the next image the top one 
    }); 
} 
    $(document).ready(function() { 
    // run every 2s 
    setInterval('cycleImages()', 2000); 
}) 
</script> 


<div id="banner"> 
<img src="img/logo.png" style="float:left" /> 
<img class="active" src="img/banner.png" alt="Banner image" /> 
<img src="img/banner2.png" alt="Banner image" />  
<img src="img/banner3.png" alt="Banner image" />  
<img src="img/banner4.png" alt="Banner image" /> 
</div> 

---

Итак, я изменил запас на полях: 0 авто. Следующая ошибка состояла в том, что у меня была строка кода, заключенная в a, это испортило все, поэтому я просто удалил ее.

Noob проблема ...

Answer 1

Похоже, что вы пытаетесь построить отзывчивый сайт ... Попробуйте это как слайдер:

http://www.woothemes.com/flexslider/

Его простое в использовании и его отзывчивый.