Home/ Questions/Q 3752272
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T09:13:03+00:00

Ok, here is the problem: I have a left side menu that will not

  • 0

Ok, here is the problem:

I have a left side menu that will not size correctly to the page. If the content does not have to scroll the footer should be at the bottom and the menu div should extend down to touch the footer. I tried the sticky footer trick or w/e it is called…but with no luck with the menu.

Here is my CSS:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    background: #999966 url(bgbottom.png);
    background-attachment: fixed;
    background-position: bottom;
    background-repeat: repeat-x;
}

a {
    color: #29211D;
}
h2 {

    font-size: 26px;
    font-weight: normal;
}

.head {

    background-image: url(bg.jpg);
    width: 100%;
    border-bottom: 4px solid #29211D;
    overflow: hidden;
    height: 185px;
}

.nav {

    background-color: #29211D;
    width: 150px;
    color: white;
    padding: 10px;
    height: auto !important;
    min-height: 100%;
    font-size: 14px;    
    float: left;
}

.content {

    font-size: 14px;
    width: 80%;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    height: auto !important;
    min-height: 70%;
    background-color: #FFF;
    border: 2px #666 solid;
    margin-left: 2%;
    margin-top: 1%;
}   

.footer {

    background-image: url(bg.jpg);
    border-top: #29211D solid 3px;
    border-bottom: #29211D solid 3px;
    text-align: center;
    font-size: 12px;
    padding-top: 3px;
    padding-bottom: 3px;

}

here is the site: http://www.pomaceaproject.org/dev/test.asp

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If I understand what you are trying to do, you want the navigation section to touch the bottom of the footer? If so, that is a simple change:

    Change the min-height property of your .nav class from min-height: 70%; to min-height: 100%;

    Demo (obviously without all the pictures on it)

    Current .css:

    @charset "utf-8";
/* CSS Document */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    background: #999966 url(bgbottom.png);
    background-attachment: fixed;
    background-position: bottom;
    background-repeat: repeat-x;
}

a {
    color: #29211D;
}
h2 {

    font-size: 26px;
    font-weight: normal;
}

.head {

    background-image: url(bg.jpg);
    width: 100%;
    border-bottom: 4px solid #29211D;
    overflow: hidden;
    height: 185px;
}

.nav {

    background-color: #29211D;
    width: 150px;
    color: white;
    padding: 10px;
    height: auto !important;
    min-height: 73%;
    font-size: 14px;    
    float: left;
    overflow: auto;

}

.content {

    font-size: 14px;
    width: 80%;
    float: left;
    height: auto !important;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #FFF;
    border: 2px #666 solid;
    margin-left: 2%;
    margin-top: 1%;
}   

.footer {

    background-color: #999966; /* Can probably be removed as you will have a background image */
    width: 100%;
    position: absolute;
    bottom: 0;
    background-image: url(bg.jpg);
    border-top: #29211D solid 3px;
    border-bottom: #29211D solid 3px;
    text-align: center;
    font-size: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
    z-index: 100;   /* Since it is will need to overlay the background of the navigation behind it */
}

    Hope that helps 🙂

    • 0