Nested div's with backgrounds

Slight problem in Netscape 7

[MWpro]

The effect that I am trying to achieve is a horizontal, 100%width spanning bar type of deal with a height of 35px. This is kinda what I want it to look like.
___________
xxxxxxxxxxxxx\_______________

And to decrease page loading time I separated it into three small images, deciding I could just use CSS and backgrounds to do it: the left background image, the middle "\" curve part image, and the right background image.

So I made a div for the right background, and within that a div is nested for the left background and the curve part.

It works amazingly well in IE6 and Opera; however in Netscape 7 the right background does not show up at all (just the #bannerleft stuff.) Here is the code that I am using

#banner {
width: 100%;
background: #FFF url("rightbg.gif") repeat-x;
}
#bannerleft {
float: left;
height: 35px;
background: #FFF url("leftbg.gif") repeat-x;
}
#bannerleft img {
margin: 0 0 0 230px;
}

<div id="banner">
<div id="bannerleft">
<img src="curveimage.gif" alt="" />
</div>
</div>

Am I doing something wrong? How can I make it display properly in Netscape 7?

[garann]

I got your code to work with either of these changes:
1. give #banner a height.
2. insert an &nbsp; after the closing tag for bannerleft.

<div id="banner"> 
<div id="bannerleft"> 
<img src="curveimage.gif" alt="" /> 
</div> [b]&nbsp;[/b]
</div>

[MWpro]

garann, that is brilliant. I went with the height solution.

Thanks a lot!