Site styling problem – right side column

Basically you need to use a background colour or background image for the sidebar itself, and not just the sidebar menu.

Here is the style sheet:

/* General Layout */
body {
margin: 0;
padding: 0;
background: #f6f6f6;
color: #000;
font-family: 'lucida grande', 'lucida sans unicode', verdana, sans-serif;
text-align: center; /* added by Alex King for compatibility with IE 5 */
}

#rap {
margin: 10px auto 0 auto;
padding: 0;
width: 767px;
border: 3px solid #aba;
background: #fff;
background-image: url('slant-whitegray.gif');
overflow: auto;
text-align: left; /* added by Alex King for compatibility with IE 5 */
}

#header {
background-image: url("https://www.ohioforblackwell.com/blog/images/slant-green.gif");
margin: 0;
padding: 0px;
font: normal 2.8em georgia;
border-bottom: 2px solid #aba;
}

#header a {
color: #666;
text-decoration: none;
}

#content {
width: 500px;
margin: 0;
text-align: left;
float: left;
background-color: transparent;
padding: 10px 25px;
border-right: 2px solid #aaa;
}

#menu {
margin: 0;
padding: 0;
width: 215px;
background: #00135E;
float: right;
overflow: hidden;
}

.credit {
clear: both;
width: 750px; /* changed by Alex King to match the width of the body */
margin: 0 auto 10px auto;
padding: 5px 3px;
background-image: url('slant-green.gif');
color: #000;
text-align: center;
}

.credit cite {
color: #000;
font-size: 90%;
font-style: normal;
letter-spacing: 1px;
}

.credit a, .credit a:link, .credit a:hover {
color: #fff;
text-decoration: none;
}

/* Basic XHTML styling */
h1, h2, h3 {
font-family: georgia, palatino, serif;
}

h2 {
margin: 0;
padding: 0;
font-size: 110%;
}

h3 {
font-size: 120%;
}

p {
font: 80%/130% verdana, 'lucida sans unicode', sans-serif;
color: #555E55;
}

/* Links */
a {
color: #aba;
text-decoration: none;
}

a:link, a:visited {
color: #666;
text-decoration: none;
}

a:hover {
text-decoration: none;
}

a:active {
text-decoration: none;
}

a img {
border: none;
}

/* Menu styling */
#menu a:link, #menu a:visited, #menu a:hover, #menu a:active {
margin: 0;
padding: 0;
}

#menu ul {
margin: 10px 0 5px 10px;
padding: 0;
color: #D10000;
list-style-type: none;
font: 12px palatino, georgia;
}

#menu ul li ul {
margin: 0 10px;
padding: 0;
}

#menu ul li ul li {
margin-top: 2px;
}

#menu #categories, #menu #search, #menu #archives, #menu #other, #menu #meta, #menu #style {
padding-top: 10px;
}

#menu form {
margin: 0;
}

#menu input {
font-family: 'lucida sans unicode', verdana, sans-serif;
}

#menu form #searchbox {
width: 8em;
padding: 2px;
}

/* Form styling */
form {
margin: 0;
padding: 0;
}

input, textarea {
padding: 1px;
}

/* other elements */
code {
font-style: normal;
color: #000;
padding-left: 15px;
font-family: 'courier new', courier, monospace;
}

acronym, abbr {
border-bottom: 1px dashed #aaa;
cursor: help;
font-size: 80%;
letter-spacing: .07em;
font-weight: bold;
}

/* WordPress elements */
.post {
text-align: left;
margin: 0 0 25px 0;
}

.storytitle {
margin: 0;
padding: 0;
font-size: 120%;
font-family: georgia, palatino, serif;
font-weight: normal;

}

.storytitle a {
color: #9BAA9B;
text-decoration: none;
}

.storycontent ul, .storycontent ol {
font: .8em 'lucida sans unicode', 'lucida grande', verdana, sans-serif;
}

.storycontent ul li, .storycontent ol li {
margin-top: 3px;
}

.meta {
font: 11px 'lucida grande', 'lucida sans unicode', verdana, sans-serif;
}

.meta a {
color: #747474;
}

.meta ul {
display: inline;
margin: 0;
padding: 0;
list-style: none;
}

.meta li {
display: inline;
}

.feedback {
font: 11px 'lucida grande', 'lucida sans unicode', verdana, sans-serif;
color: #000;
text-align: left;
}

/* WordPress comments form */
#commentform input, #commentform textarea {
background: #fff;
border: 1px solid #aaa;
}

#commentform textarea {
width: 100%;
}

/* WordPress calendar */
#calendar {
margin: 10px 0;
}

#wp-calendar {
border-left: 1px solid #aba;
border-right: 1px solid #aba;
border-bottom: 1px solid #aba;
empty-cells: show;
margin: 0;
width: 80%;
}

#wp-calendar caption {
padding: 3px;
text-align: center;
background-color: #aba;
color: #fff;
}

#wp-calendar #next a {
margin-top: 5px;
padding-right: 10px;
text-align: right;
}

#wp-calendar #prev a {
margin-top: 5px;
padding-left: 10px;
text-align: left;
}

#wp-calendar a {
display: block;
text-decoration: none;
font-weight: bold;
}

#wp-calendar a:hover {
background: #000;
color: #fff;
}

#wp-calendar td {
color: #777;
font-family: 'lucida grande', 'lucida sans unicode', verdana, sans-serif;
letter-spacing: normal;
padding: 3px 0;
text-align: center;
}

#wp-calendar #today {
background: #aba;
color: #fff;
}

#wp-calendar th {
font-style: normal;
text-transform: capitalize;
}

I don’t see anything that seperates the menu from the “sidebar”- Am I wrong?

Yikes, it’s not very good form to post your entire stylesheet – only the part with the problem. And the sidebar and menu are words used synonymously.
Yours is called menu.

I sincerely apologize- I am a stupid newbie who doesn’t know much about css, other than trial and error.

How do I make the height of the blue to be 100%?

You have a bg gif already. Just add a blue bit on the end of the graphic.

That doesn’t work- The gif doesn’t do anything at this point- I just took it out and it still looks the same. Is there no way to change the background color of the right column?

I apologize again aboust posting my entire style file- If a mod could delete that, please do.

I am still stuck with trying to make this blue menu be 100% tall- Any suggestions? ??

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

As I suggested.

It works perfectly! Thank you so much guys!!!!

??