Question

I am creating a website with a slideshow using Nivo Slider. For some reason, after my nivo slider div, even though all my DIVs seem to be layered correctly (and closed correctly), my container DIV stops unexpectedly after the Nivo Slider.

Here is the site: http://cbchaverhill.onedirectionconnection.com

And here is how my DIVs are set up:

<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">

As you can see, the container DIV stops right after the slideshow, and for some reason I can’t seem to figure out, the page extends for over 4000 pixels even though there is no content.

If anyone has any input it would be greatly appreciated. If you need anymore information please just let me know.

Answer 1

Interstingly, it doesn’t happen in IE due to you triggering Quirks Mode (remove the comment before the <!DOCTYPE> to fix that).

The problem is caused by the floats. To fix, just add overflow:hidden to your Container div.