I am trying to make the navigational column to the left on http://www.strongfamilies.us/index.php longer so that I could fit in more links. How can I make this column longer? Thanks.

It looks like the main-nav div has a height associated with it so you would need to either increase the height or probably just remove the height and let the div expand with it's content.

Unfortunately there's an image for the background, which will need to be adjusted as well. If you only plan on increasing the heigh of the column this one time you could increase the height of this background image and have it match the height of the div.

Thank you so much for your response. However, I cannot find the right file to adjust the height. I don't see nav.css. All I can find is layout.css, general.css, and sitemap.css. Would nav.css be in another folder other than the Includes? Thanks.

I really couldn't tell you since I don't have access to your server. From what I can tell it looks like it's in the same includes folder as the layout and general css files.

However I never said the code to change was in that file. It actually looks like it's in layout.css. It's also main_nav and not main-nav as I first mentioned.

Thank you for your response. I'm still at a loss. Below is my layout.css. Which height should be adjusted as I cannot seem to find main.nav?

#full_area {
margin: 0 auto;
width: 960px;
text-align:left;
}

/************************** SUB PAGE ************************/
.subpage {
height: 16px;
}
.subpage .icon{
display: block;
height: 29px;
width: 28px;
background-image: url('../images/layout/page-title-icon.png');
background-repeat: no-repeat;
float: left;
margin: 3px 10px 3px 3px;
}

.subpage .title {
margin-top: 8px;
float: left;
color: #0066a5;
font-size: 16px;
font-weight:bold;
letter-spacing:4px;
font-weight: 500;
padding-bottom:10px;
}


.prestitle {
text-align: center;
color: #d71067;
font-size: 16px;
font-weight:bold;
letter-spacing:4px;
font-weight: bold;
padding-bottom:10px;

}

.author {
font-weight: bold;
font-size: 16px;
padding-top: 10px;
}
.description {
font-style: italic;
}
.seperator {
height: 16px;
margin-top: 20px;
}
.seperator .icon{
display: block;
height: 11px;
width: 12px;
background-image: url('../images/layout/bullet.png');
background-repeat: no-repeat;
float: left;
margin: 3px 10px 3px 3px;
}
.seperator .title {
padding-top: 1px;
float: left;
font-weight:bold;
padding-bottom:10px;
}
/************************** CHAT ************************/
#chat {
background-repeat: no-repeat;
height: 96px;
width:120px;
margin: 10px 0px 0px 10px;
}
/************************** SPECIAL ************************/
.special {
width: inherit;
height: 54px;
position: relative;
}
.special .icon {
background-image: url('../images/layout/special-icon.png');
background-repeat: no-repeat;
height: 54px;
width: 44px;
float: left;
}
.special .message {
color: #C06;
margin-top: 5px;
width: 345px;
height: 54px;
float: left;
min-height: 54px;
margin-left: 10px;
font-weight: bold;
}
/************************** NEWSLETTER ************************/
#newsletter {
width: 580px;
background-repeat:no-repeat;
height: 180px;
top: 110;
left: 420;
margin: 10px;
position: absolute;
}
#newsletter .title {
font-size: 17px;
color: #333536;
position: absolute;
top: 10px;
left: 50px;
}
#newsletter .icon {
margin: 2px;
background-image: url('../images/layout/newsletter-email-icon.gif');
background-repeat: no-repeat;
height: 39px;
width: 39px;
display: block;
position: absolute;
top: 0px;
left: 0px;
}
#newsletter form {
position: absolute;
display: block;
top: 25px;
left: 40;
padding: 4px;
}
#newsletter form input[type="text"] {
border: solid 1px #666;
border-collapse: collapse;
}
#newsletter form .label {
width: 45px;
color: #666;
font-weight: bold;
display: inline;
float: left;
}
#newsletter form .input { width: 143px;
display: inline;
float: left; /*right;*/
}
#newsletter form .submit {
}
#newsletter form .form_item {
width: 202px;
height: 20px;
padding: 2px;
position: relative;
}
#newsletter p {
font-family: Arial, sans-serif;
font-size: 10px;
margin: 59px 15px 0 53px;
}
/************************** MAIN AREA ************************/
#main_content {
border-top:5px solid #06C;
position: relative;
top: 0px;
left: 0px;
width: 960px;
background-color: #FFF;
}

#content {

position: relative;
top: 0px;
padding: 10px;
}
#content .header {
color: #663;
font-size: 20px;
padding-left: 10px;
letter-spacing:4px;
font-weight: 500;
}

#content .subheader {
color: #663;
font-size: 15px;
}
/************************** HEADER ***************************/
#header {
height: 230px;
position: relative;
top: 0px;
left: 0px;
width: inherit;
background-image: url('../images/layout/header-background.png');
background-repeat: no-repeat;
background-color: #ffffff;
z-index: 0;
}
/************************** FOOTER ***************************/
#footer {
background-image : url('../images/layout/footer-background.png');
background-repeat: no-repeat;
background-position: bottom;
height: 61px;
width: inherit;
position: relative;
bottom: 0px;
padding: 0px 0px;
color: #FFF;
font-size: 11px;
clear: both;
width: 960px;
margin: auto;
}

#footer_mission_statement {
padding-left: 55px;
padding-top: 5px;
font-weight: bold;
font-size: 12px;
padding-bottom: 25px;
}

#footer_left_side {
padding-top: 10px;
width: 45%;
float: left;

}
#footer_right_side {
width: 55%;
padding-top: 10px;
float: right;
text-align: right;
}
#copyright {
padding-left: 20px;
}
#bottom_nav {
color: #F90;
padding-bottom: 3px;
}
#bottom_nav a {
color: #FFF;
text-decoration: none;
padding: 0 17px;
}
#contact_info_phone{
font-weight: bold;
float: left;
padding-left: 100px;
}
#contact_info_email{
float: right;
padding-right: 21px;
}
#contact_info_email a {
color: #FFF;
text-decoration: none;
}

/************************** MISSION STATEMENT ************************/
.missionstatement_icon{
display: block;
height: 29px;
width: 28px;
background-image: url('../images/layout/mission-statement-icon.jpg');
background-repeat: no-repeat;
float: left;
margin: 3px 10px 3px 3px;
}
.missionstatement_text {
margin-top: 8px;
float: left;
color: #e34073;
font-size: 16px;
font-weight:bold;
letter-spacing:4px;
font-weight: 500;
padding-bottom:10px;
}

ol li {
margin-top: 10px;
}

ul li {
margin-top: 10px;
}

I just found nav.css and I adjusted the height several times, but the height of the navigational column never changed. The nav.css is below. Please advise. Thanks.

#main_nav {
background-image: url('../images/layout/nav-background.png');
background-repeat: no-repeat;
width: 239px;
/*
margin-top: -29px;
*/
float: left;
left: -10px;
z-index: 400;
position: relative;
top: -39px;
height: 740px;
overflow: hidden;
}

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

margin: 0px;
padding: 3px;
list-style: none;
margin: 5px;
width: 220px;
}
#main_nav ul li a.active {
color: #690;
font-size: 14px;
font-weight: bold;
padding-left: 30px;
background-image: url('../images/layout/active-menu-arrow.png');
}

#main_nav ul li a:hover {
color: #690;
font-size: 14px;
font-weight: bold;
padding-left: 30px;
background-image: url('../images/layout/active-menu-arrow.png');
}

#main_nav ul li a {
color: #333;
font-size: 14px;
text-decoration: none;
padding-left: 15px;
display: block;
background-image: url('../images/layout/menu-arrow.png');
background-repeat: no-repeat;
background-position: 0px 5px;
}

Did you remember to change the image that's the background for that column? You'll have to adjust that in an image editor.

Adjust the image and then adjust #main_nav {height: 740px} to match.