当改变浏览器大小时...... DIV落后于另一个

Question

当我更改浏览器窗口的大小时，div会落后于另一个。{1}}。两个divs位于同一个容器中。

请参阅以下图片：http://img833.imageshack.us/img833/9394/ffffhb.jpg

我该如何解决这个问题？ 这是两个div的容器的HTML代码：

 <div class="hero-unit">

 <div id="this-carousel-id" class="carousel slide">
 <div class="carousel-inner">
 <div class="item next left">
 <a href="http://hubblesite.org/gallery/album/entire/pr2006046a/xlarge_web/npp/128/"> <img src="img/antennae.jpg" alt="Antennae Galaxies" width="532" height="238"> </a>

 </div>
 <div class="item">
 <a href="http://hubblesite.org/gallery/album/entire/pr2007016e/xlarge_web/npp/128/"> <img src="img/carina.jpg" alt="Carina Caterpillar" width="532" height="238"> </a>

 </div>
 <div class="item">
 <a href="http://hubblesite.org/gallery/album/entire/pr2003010i/npp/128/"> <img src="img/echo.jpg" alt="Light Echo" width="532" height="238"> </a>

 </div>
 <div class="item active left">
 <a href="http://hubblesite.org/gallery/album/entire/pr2006024a/xlarge_web/npp/128/"> <img src="img/ngc5866.jpg" alt="Galaxy NGC5866" width="532" height="238"> </a>

 </div>
 </div>

 <a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
 <a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
 </div>


 <video width="440" height="320" controls="controls">
 <source src="insane.MP4" type="video/mp4">
 </video>


 </div> 

这是CSS代码：

/*container*/
.hero-unit {
padding: 60px;
position: relative;
margin-bottom: 30px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
height: 100px;
margin-top: 50px;
border-radius: 6px;
}

/*slider*/
.carousel {
position: absolute;
top: 0;
left: 0;
margin-top: 6px;
margin-bottom: 0 auto;
height: 260px;
line-height: 1;
}

/*slider-inner*/
.carousel-inner {
position: relative;
width: 100%;
height: 220px;
overflow: hidden;
width: 520px;
width: %;
}

/*video*/
.hero-unit video {
height: 210;
margin-top: 5px;
z-index: 1;
}