Extra Length on CSS menu background

So, here's my problem. I have my CSS and everything working, however I'm having a problem with getting the length of the background on my left menu bar right on each page. It stays standard accross all the pages, however, I want it different lengths on different pages.
Here's my CSS:

body {
background: #E8E8E8;
font: 16px Verdana, sans-serif;
}

#left {
width: 159px;
height: 900px;
background: url(../Pictures/crackback.gif);
float: left;
margin-right: 20px;
}
#right {
width: 75%;
float: right;
}
a:link {color: #104E8B;
text-decoration: none;
background-color: transparent }
a:visited { color: #4169E1;
text-decoration: none;
background-color: transparent }
a:hover { color: #00066;
text-decoration: underline;
background-color: transparent }
a:active { color: #A9ACB6;
text-decoration: underline;
background-color: transparent }
.title { text-align: center}
.floaty {
float: right;
}
#navlist
{
padding: 0 1px 1px;
font: bold 12px Verdana, sans-serif;
background: gray;
width: 13em;
}

#navlist li
{
list-style: none;
margin: 0;
border-top: 1px solid gray;
text-align: left;
}

#navlist li a
{
display: block;
padding: 0.25em 0.5em 0.25em 0.8em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover
{
border-color: #000066;
color: #FFF;
background: #4169e1;
}
#good {
text-align:center;
}

Well, you have "height: 900px" set for the #left div, so it's always going to be 900px high... You can leave the height declaration off and it'll adjust to the height of the content inside.

Alternatively, you can use "min-height" or "max-height," which do what they sound like they should do, but don't work in IE; or, "display: table-cell" which makes the column expand much like a table cell does, but doesn't work in Safari. Height is always tricky when emulating table-layout in CSS...

@Richard: ... but doesn't work in Safari ... nor in IE... :D

Kirby,

As Richard (rmedek) already mentioned, controlling height on web pages is hard. The most flexible solution would be to let the content determine the desired height (which it does by default), and use a visual technique on an element that contains all the "columns" that need to look like they're the same height. This technique is described in the ALA article "Faux Columns (http://www.alistapart.com/articles/fauxcolumns/)". Although Dan Cederholm describes a solution for a fixed width layout, using percentage values for widths and background image positioning makes it equally applicable for fluid layouts.

Well, my only problem is, is that I want the background, so leaving off a height isn't going to work, because it just fits the left column to my menu. I also need it to work with IE and Mozilla, so...

any suggestions?

Yes. You could try this solution (http://codingforums.com/showpost.php?p=273210&postcount=3). It does exactly what you need it to.

Or this one (http://richardmedek.com/temp/example6.htm), which works if you have only background colors, not images.

Well, are you talking about the article? or just the auto-format? Cuz I tried the auto format, and all it did was cut my background off right after my menubar. I want the background to extend clear until the bottom of the page, but I want the bottom of the page to be determined by the content in my content div.

Follow?