Problems Extending Navigation Panel to Footer

[ellenjones6]

I would like to extend my left-hand navigation panel to the footer, so the panel does not come to abrupt end, which tends to look a bit odd.

Here is the way one of the pages looks now: http://wildadirondacks.org/adirondack-wildlife.html

Below is a picture of how I would like a page to look, with the left navigation panel extended down beyond the last navigation tab, to the top of the footer.

6160

I know there is probably a very simple solution, but I have spent many hours scouring the web for fixes and trying out various modifications of the css. I have tried all sorts of things (changing height, min-height, etc), but nothing works. Could the fix somehow be related to my old nemesis, box-sizing: border-box?

If there is no simple solution, I would be satisfied with a solution that did not extend the navigation panel completely to the footer, but just far enough so the end is not abrupt. (I thought padding might work, but alas...) I have a gradient on the navigation panel, so the panel would just fade gracefully into white several inches or so below the last navigation tab. Anything to avoid the abrupt end.

Any suggestions?

Thanks, ellen

Here is the relevant css (asideLeft is my left-hand navigation panel):


/* These style determine how the page will look on a desktop with a viewing window from 1200 to 1400 pixels wide. */

.container {
width: 100%;
margin: 0 auto;

}
.Main {
width: 80%;
}
.asideLeft {
float: left;
background: #e6e9f1; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(rgba(230,233,241,1.00),rgba(230,233,241,0)); /*Safari 5.1-6*/
background: -o-linear-gradient(rgba(230,233,241,1.00),rgba(230,233,241,0)); /*Opera 11.1-12*/
background: -moz-linear-gradient(rgba(230,233,241,1.00),rgba(230,233,241,0)); /*Fx 3.6-15*/
background: linear-gradient(rgba(230,233,241,1.00), rgba(230,233,241,0)); /*Standard*/
margin-left: 10%;
width: 25%;
margin-right: 0px;
font-size: 1em;
}

.sectionRight {
width: 53%;
float: right;
margin-left: 2%;
text-align: left;
font-size: 1.2em;
margin-right: 10%;
}
footer {
width: 100%;
background-color: rgba(86,95,100,1.00);
float: left;
margin: 0 auto;
margin-bottom: 10px;
}

[jscheuer1]

You may get other responses on this that are more in line with what you're asking, but - just my 2 cents, I think it's fine as is. You do need room for the accordion to expand when it's activated. Many sites have content that "runs out" abruptly in one column while continuing in another. Having a small gradient at the bottom of the accordion might not be such a bad thing though. But I think finding an optimal color for it would be more important. It looks good with all the pages except the plants one. Perhaps the easiest integration there would be to have a different banner image for plants. One with more blues and greens, less yellows and browns.

[Beverleyh]

I like to use a pseudo element to do this kind of thing - similar to what's described here http://callmenick.com/post/css-equal-height-columns-three-different-ways (although you could try all 3)

If 100% height doesn't work in this case, try absolutely positioning with top, left, and bottom, all set as 0. You might need to offset the bottom value to stop above your footer though (on mobile so haven't/can't see your markup)

[ellenjones6]

Thank you. This looks a bit complicated. I think I will need to experiment with each of these three strategies using demo pages, to see how everything works, before I try to apply any of them to my web site. I'll give it a try after I finish migrating the shrub pages from my old site. Thanks again! ellen