css - 容器 Div 意外停止

Question

我正在使用 Nivo Slider 创建一个带有幻灯片的网站。出于某种原因，在我的 nivo slider div 之后，即使我所有的 DIV 似乎都正确分层(并正确关闭)，我的容器 DIV 在 Nivo slider 之后意外停止。

这是网站:http://cbchaverhill.onedirectionconnection.com

下面是我的 DIV 是如何设置的:

<div id="container" class="shadow">

<div id="title">
<div id="titleleft">Calvary Baptist Church</div>
<div id="cbcstuff">
Calvary Baptist Church<br>
13 Ashland Street<br>
PO Box 781<br>
Haverhill, MA 01830
</div>
</div>

<div id="navi">

<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'access', 'menu_class' => 'access' ) ); ?>

</div>

<div id="header">

<div id="slide">

<div id="slider" class="nivoSlider">
            <img src="/wp-content/themes/cbc/001.png" alt="" />
            <img src="/wp-content/themes/cbc/002.png" alt="" />
            <img src="/wp-content/themes/cbc/003.png" alt="" />
        </div>
<script type="text/javascript" src="/nivo-slider/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/nivo-slider/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
    effect: 'fade',
    animSpeed: 500,
    pauseTime: 4000,
    startSlide: 0,
    directionNav: false,
    directionNavHide: true,
    controlNav: false,
    controlNavThumbs: false,
    pauseOnHover: true,
    manualAdvance: false,
    randomStart: false,
});
});
</script>

</div>


<div id="sidebarr">

Blah blah blah Blah blah blah Blah blah blah Blah blah blah.
Blah blah blah Blah blah blah Blah blah blah Blah blah blah.

</div>

<div id="content">

如您所见，容器 DIV 在幻灯片放映后立即停止，出于某种我似乎无法弄清楚的原因，即使没有内容，页面也会扩展超过 4000 像素。

如果有人有任何意见，我们将不胜感激。如果您需要更多信息，请告诉我。

Answer 1

有趣的是，由于您触发了 Quirks 模式，它不会在 IE 中发生(删除 <!DOCTYPE> 之前的注释以修复该问题)。

问题是由 float 引起的。要修复，只需添加 overflow:hidden到您的 Container div。