CSS, JQuery Cycle and IE issue

Question

I'm using a jQuery plugin called "Cycle" and I am having issues with the CSS for it in IE, it looks perfect in Opera, FF, Chrome and Safari, but IE is cracking the sads..

www[dot]photographicpassions[dot]com/home

You will see the "latest work" on the right hand side and the thumbnails below the main image, in FF, Safari, Chrome and Opera, the grey container is behind all the thumbnails, but in IE, the grey background stops at the top of the thumbnails.. I've tried various things to make it work, to no avail.. could someone please help me??

Here's the CSS for the containers which aren't playing nice in IE:

/* latest work container */
div#latestHolder {
    position: relative;
    float: left; width: 368px;
    margin: 0px 0px 0px 0px;
    padding: 10px 10px 10px 10px;
    background-color: #666666;
}

/* thumbnails */
div#nav {
    position: relative;
    float: left; left: 0px;
    width: 376px;
    padding: 0px 0px 0px 0px;
    margin: 1px 0px 0px 0px;
}
    div#nav li {
        width: 66px;
        float: left;
        padding: 0px 0px 0px 0px;
        margin: 9px 9px 0px 0px;
        list-style: none;
        cursor: pointer;
    }
    div#nav a {
        padding: 3px;
        display: block;
        background: #404040;
        cursor: pointer;
    }
        div#nav a.activeSlide {
            background: #ffffff;
            cursor: pointer;
        }
        div#nav a:focus {
            outline: none;
            cursor: pointer;
        }
    div#nav img {
        width: 60px;
        border: none;
        display: block;
        cursor: pointer;
    }

If someone could help me out, that'd be fantastic!! :)

Answer 1

Just use overflow: hidden on your containers. By default, overflow: auto will not grow elements to contain its contents. Setting overflow: hidden (or overflow: auto...bit with that you risk unwanted scrollbars), you will force your container divs to expand to the hight of all their child elements...floated elements included.

Answer 2

The div #latestHolder is floated to the left, which causes it to be removed from the flow of the page. Try either using relative/absolute position instead of float:left; or clear the float before you end the #mainContainer div.

Clearing would involve throwing in a block-level element at the end of the #maincontainer div like so:

<div style="clear: both;"></div>