How can I get a left-navigation column to fill the entire left side of the middle of a webpage using CSS?
I'm working on making this web page:
and I want to get a left navigation area to extend all the way down the left side, from the bottom of the header to the top of the footer. I tried setting height: 100% but that didn't seem to work. Is there something I'm doing wrong here?
This will never work the way you're expecting it to. You cannot set a 100% height to the element as it will go to 100% of its content, not the height of its parent container.
What I recommend doing is removing the background from the leftNAv area, and instead, set a repeating background on div id="middleArea" with the grey part as repeat-y. that way, no matter how big the #middleArea gets, the background will expand regardless.
You can try resources like Faux Columns which may give you the templates and other results you're looking for: