IE7 cutting off image

Question

Hi all I have 3 divs with rollover images inside them stacked vertically inside my main content div. IE7 is chopping off about three quarters of the bottom div and I can't figure out why. It displays perfectly in all other browsers (even IE6) but IE7 just won't display properly. This is my first website so I still have a lot to learn. I've managed to fix the other IE bugs but just can't figure this one out. Any help appreciated!

.main_content {
    float: left;
    width: 816px;
    background-image: url(Images/evokedesign_bg_tile.png);
    background-repeat: repeat-y;
    overflow: hidden;
}
.portfolio_buttons {
    float: left;
    width: 634px;
}

Site link: http://evokedesignstudio.com.au/Portfolio.html

Answer 1

Now you posted a link to your live site, I found the answer very quickly:

• On .gallery, remove the height: 400px rule.
• Done.

This fixes IE7, and nothing changes in IE8/other browsers.