IE 7 display problem with 2 wrappers

Question

I have 2 wrappers, one inside the other, as per html below. The first wrapper contains a tile which scrolls down. Wrapper 2 has an image 940 X295px. Works beautifully in IE5 & IE8, but in IE7 the footer jumps up to wrapper2 and the text extends down, underneath and below.

This is my html:

<div id="wrapper">
<div id="header"></div>
<div id="wrapper2">
<div id="maincontent"></div>
<div id="navigation"></div>
</div>
<div id="footer"></div>
</div>

I have moved the closing div's everwhere with no success.

My css for the above divs are:

body {
 margin-top: 0px;
 padding-top: 0px;
 background-image: url(../images/body_vert_tile.gif);
 background-color: #C8BE86;
 background-repeat: repeat-x;
}
#wrapper {
 background-attachment: scroll;
 background-image: url(../images/wrapper_horiz_tile.gif);
 background-repeat: repeat-y;
 margin-right: auto;
 margin-left: auto;
 width: 940px;
}
#wrapper2 {
 background-image: url(../images/wrapper_2.jpg);
 height: 295px;
 margin-right: auto;
 margin-left: auto;
 background-position: left top;
}
#header {
 width: 940px;
 background-image: url(../images/header.jpg);
 height: 345px;
 margin-right: auto;
 margin-left: auto;
}
#maincontent {
 float: right;
 width: 630px;
 padding-right: 70px;
 padding-left: 10px;
 margin-top: -10px;
}
#maincontent_home {
 float: right;
 width: 420px;
 padding-right: 10px;
 padding-left: 10px;
 margin-top: -10px;
}
#secondary_content {
 float: right;
 width: 190px;
 padding-right: 70px;
 margin-top: 30px;
 padding-left: 20px;
}
#footer {
 background-repeat: no-repeat;
 background-position: left bottom;
 width: 940px;
 text-align: center;
 clear: right;
 background-image: url(../images/footer.jpg);
 height: 145px;
 margin-right: auto;
 margin-left: auto;
#navigation {
 float: right;
 width: 130px;
 padding-right: 10px;
 padding-bottom: 10px;
 background-repeat: repeat-y;
 background-position: right top;
 padding-top: 5px;
}

I'm pulling my hair out. Should I just ignore IE7? I'd really like to overcome this. The only way around this I have found is to have wrapper 2 sit below the header and close before the main content. I then set -ve margins at the top of the content and nav the same size as the height of the image in wrapper2. It worked, but i don't know if I should be doing things like this.

Your help would be greatly appreciated.

Answer 1

It would be great if you could provide an URL to check this behavior, but i would add a :

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

after the closing of the navigation DIV

BTW, I your are not using any CSS reset, you should. I use blueprint, but there are many.

Answer 2

Alejandro suggested I remove the height of Wrapper 2 and add: background repeat: no repeat;

When I did this the image disappeared, but when I changed the height property to min:height: 295px; it worked beautifully. Thankyou Alejandro for pointing me in the right direction