My right sidebar is a light gray color which often has less content than the center column. I'd like the right column to be the same height as the center column - essentially keeping the gray sidebar from stopping short in the middle of the page and looking odd. Does anyone know how to do this?

I've poked around on the web and I saw solutions saying to add "height: 100%" to my body class and #right class, but this doesn't seem to work.

Does anyone have any experiece with this? Any help would be greatly appreciated! Thanks in advace!

Here is my CSS:
------
body {
margin: 0px 0px 10px 10px;
height: 100%;
border: 0;
padding: 0;
background-color: #FFFFFF;
text-align: center;

}

.clr
{
clear: both;
width: 0;
height: 0;
line-height: 0;
}

a {
text-decoration: underline;


}

a:link {
color: #990000;
}

a:visited {
color: #990000;
}

a:active {
color: #990000;
}

a:hover {
color: #000000;
}

h1, h2, h3 {
margin: 0px;
padding: 0px;
font-weight: normal;
}

#container {
line-height: 140%;
margin-right: auto;
margin-left: auto;
text-align: left;
height: 100%;
width: 802px;
padding: 0px;
background-color: #FFFFFF;

}


#banner-img {
background: #FFFFFF url("http://treebetty.typepad.com/bolst/images/BolstBanner.jpg") no-repeat 0px 0px;

height: 145px;
border-bottom: 1px solid #999999;
display: block;


}

div.img-link a {
display: block;
height: 145px;
text-decoration: none;
}

#banner {
display: none;
}

#banner a {
color: #FFFFFF;
text-decoration: none;
}




#banner h1 {
font-size: xx-large;
font-weight: bold;


}

#banner h2 {
font-size: medium;
}



#left {
float: left;

height: 100%;
width: 200px;
background-color: #FFFFFF;
overflow: hidden;
}

textarea#comment-text {
width: 370px;
}


#right {
float: left;
height: 100%;
width: 200px;
background-color: #E6E6E6;
overflow: hidden;
}

#center {
float: left;
width: 400px;
overflow: hidden;
height: 100%;

}



.sidebar {
padding: 15px;
}

.sidebar p {
background-color: #FFFFFF;
line-height: 140%;
color: #333333;
font-family: Helvetica, Arial, sans-serif;
font-size: medium;
}


.sidebar a {

text-decoration: none;

}

.sidebar a:link {
color: #;
}

.sidebar a:visited {
color: #;
}

.sidebar a:active {
color: #;
}

.sidebar a:hover {
color: #;
}

.content {
margin: 0px 20px 10px 15px;
}


.content p {
color: #333333;
font-family: Helvetica, Arial, sans-serif;
font-size: x-small;
font-weight: normal;
line-height: 150%;
text-align: left;
margin-bottom: 5px;



}



.content blockquote {
line-height: 150%;
}

.content li {
line-height: 110%;
}

.content h2 {
color: #333333;
font-family: Helvetica, Arial, sans-serif;
font-size: x-small;
border-bottom: 1px dotted #999999;
text-align: left;
font-weight: bold;
font-style: italic;




margin-top: 10px;
margin-bottom: 5px;
padding: 3px;
}

.content h3 {
color: #000000;
font-family: Helvetica, Arial, sans-serif;
font-size: medium;
text-align: left;
font-weight: bold;
margin-bottom: 5px;

}

.content p.posted {
clear: both;
color: #999999;
font-family: Helvetica, Arial, sans-serif;
font-size: x-small;
text-align: left;
font-weight: bold;
border-bottom: 1px dotted #999999;
margin-bottom: 15px;
line-height: normal;
padding: 5px;
}

#calendar {
line-height: 140%;
color: #333333;
font-family: Helvetica, Arial, sans-serif;
font-size: x-small;



padding: 2px;
text-align: center;
margin-bottom: 30px;
}

#calendar table {
padding: 2px;
border-collapse: collapse;
border: 0px;
width: 100%;
}

#calendar caption {
color: #666666;
font-family: Helvetica, Arial, sans-serif;
font-size: x-small;
border-bottom: 1px solid #999999;
text-align: left;
font-weight: bold;

text-transform: uppercase;
padding: 3px;
letter-spacing: .3em;
}

#calendar th {
text-align: center;
font-weight: normal;
}

#calendar td {
text-align: center;
}

.sidebar h2 {
color: #000000;
font-family: Helvetica, Arial, sans-serif;
font-size: xx-small;
text-align: left;
font-weight: bold;
border-bottom: 1px dotted #999999;

text-transform: uppercase;
padding: 1px;
letter-spacing: .3em;
}

.sidebar ul {
padding-left: 0px;
margin: 0px;
margin-bottom: 30px;
}


.sidebar li {
color: #333333;
font-family: Helvetica, Arial, sans-serif;
font-size: x-small;
text-align: left;
line-height: 70%;

margin-top: 10px;
list-style-type: none;
}


.sidebar content {
color: #666666;
font-family: Helvetica, Arial, sans-serif;
font-size: small;
text-align: left;
line-height: 90%;

margin-top: 10px;
list-style-type: none;
}



.sidebar img {
border: 5px solid #EEEEEE;
}

.photo {
text-align: left;
margin-bottom: 20px;
}

.link-note {
font-family: Helvetica, Arial, sans-serif;
font-size: x-small;
line-height: 150%;
text-align: left;
padding: 2px;
margin-bottom: 15px;
}

#powered {
font-family: Helvetica, Arial, sans-serif;
font-size: x-small;
line-height: 150%;
text-align: left;
color: #333333;
margin-top: 50px;
}

#comment-data {
float: left;
position: relative;
width: 180px;
padding-right: 15px;
margin-right: 15px;
text-align: left;

}

textarea[id="comment-text"] {
width: 80%;
}

.image-full {
width: 370px;


}

.image-thumbnail {
float: left;
width: 130px;
margin-bottom: 10px;
}

.image-thumbnail img {
width: 115px;
height: 115px;
}

On ALAP:

How do you get the right column’s background color to extend all the way down the page?

The answer:

http://www.alistapart.com/articles/fauxcolumns/

ALAP (http://www.alistapart.com/) is a hugely great CSS/HTML resource.

I concur with the above. A List Apart is recognized even by the W3C and Web Standards Groups. So is their method above for doing this with columns.

i've been fighting with this a bit too and since I used the ALA option it looks great.