Fluid DIV height: Left Menu column not matching up with Right Content

Please HELP!

I have a vertical menu bar on the left, and the main content of the site on the right. The content height will vary from time to time, depending on what's placed there. I need the left menu DIV to be fluid in height, so that it extends down to match the height of the content, and fills with the background.

Here's my site:

http://bossteel.com/index09-9.html

As you can see, the left menu section is either too long (in IE), or too short in other browsers such as FF, Safari, Netscape.

What am I doing wrong?

Any help to solve this mystery is greatly appreciated!
Thanks!

Hello puffnstuff,
Try putting that background image somewhere else.
Like this -

/* Use the below for paragraphs that need to be left and right justified */
p
{text-align: justify;
padding-left: 5px;
line-height: 100%;
}

#contentwrapper{
float: left;
width: 100%;
background: url(images/gradient151.jpg) repeat-y left;
}

#maincontent{
margin-left: 145px; /*Set left margin to LeftColumnWidth*/
background-image: url(images/gradient695.gif);
height: 100%;
}

#leftmenubar{
float: left;
height: 100%; /* supposed to make it fluid height to match bottom of container */
width: 145px; /*Width of left menu bar*/
margin-left: -840px; /*Set left margin to -(MainContainerWidth)*/
}


.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

Thank you so much, Excavator! I never would have thought to put the nav background THERE.


Actually, when I tried what you suggested, it made things worse. So then I removed the repeat-y command, and now it works!

Thanks again.